Vue实现根据hash高亮选项卡


Posted in Javascript onMay 27, 2019

本文实例为大家分享了Vue实现根据hash高亮选项卡的具体代码,供大家参考,具体内容如下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
a {
 color: #555;
}
.active {
 color: red;
}
</style>
</head>
<body>
<main id="box">
 <div class="tab">
 <a v-for="tab in tabs" :href="tab.href" :class="{active:tab.href==myhash}">{{tab.title}}</a>
 </div>
</main>
<script src="https://cdn.jsdelivr.net/npm/vue"></script> 
<script>
var vm=new Vue({
 el:'#box',
 data:{
 tabs: [
 {
 title: '所有任务',
 href: '#all'
 },
 {
 title: '未完成任务',
 href: '#unfinished'
 },
 {
 title: '完成的任务',
 href: '#finished'
 }
 ],
 myhash:'#all' //存储当前hash值
 }
}); 
function watchHashChange(){
 var hash = window.location.hash;
 if(hash!=''){
 vm.myhash = hash; //将hash值传过去
 }else{
 vm.myhash = '#all'; //否则用默认值
 }
}
watchHashChange();
window.addEventListener('hashchange',watchHashChange);
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
Jan 06 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
Apr 26 Javascript
基于Jquery实现表单验证
Jul 20 Javascript
javascript实现随机显示星星特效
Jan 28 Javascript
vue2.0构建单页应用最佳实战
Apr 01 Javascript
vue生成随机验证码的示例代码
Sep 29 Javascript
浅谈node的事件机制
Oct 09 Javascript
vue2组件之select2调用的示例代码
Oct 12 Javascript
node vue项目开发之前后端分离实战记录
Dec 13 Javascript
Vue项目中使用jquery的简单方法
May 16 jQuery
layui按条件隐藏表格列的实例
Sep 19 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
Jul 15 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
May 27 #Javascript
Vue使用localStorage存储数据的方法
May 27 #Javascript
了解javascript中的Dom操作
May 27 #Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
May 27 #Javascript
vue cli3.0 引入eslint 结合vscode使用
May 27 #Javascript
深入浅出了解Node.js Streams
May 27 #Javascript
JavaScript怎样在删除前添加确认弹出框?
May 27 #Javascript
You might like
PHP表单提交表单名称含有点号(.)则会被转化为下划线(_)
2011/12/14 PHP
apache mysql php 源码编译使用方法
2012/05/03 PHP
php计算一个文件大小的方法
2015/03/30 PHP
使用WAMP搭建PHP本地开发环境
2017/05/10 PHP
javascript英文日期(有时间)选择器
2007/05/02 Javascript
IE autocomplete internet explorer's autocomplete
2007/06/30 Javascript
js 模拟实现类似c#下的hashtable的简单功能代码
2010/01/24 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
2014/06/24 Javascript
JavaScript实现找出字符串中第一个不重复的字符
2014/09/03 Javascript
javascript操作符&quot;!~&quot;详解
2015/02/10 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
2015/03/02 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
2015/08/07 Javascript
BootStrap tooltip提示框使用小结
2016/10/26 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
2016/12/26 Javascript
JS中双击和单击事件冲突的解决方法
2018/04/09 Javascript
vue单页开发父子组件传值思路详解
2018/05/18 Javascript
vue实现简单loading进度条
2018/06/06 Javascript
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
Python yield 使用浅析
2015/05/28 Python
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
python 处理dataframe中的时间字段方法
2018/04/10 Python
Python 获取项目根路径的代码
2019/09/27 Python
python3 图片 4通道转成3通道 1通道转成3通道 图片压缩实例
2019/12/03 Python
python实现简单飞行棋
2020/02/06 Python
pytorch torchvision.ImageFolder的用法介绍
2020/02/20 Python
使用CSS3代码绘制可爱的Hello Kitty猫
2016/08/03 HTML / CSS
Michael Kors加拿大官网:购买设计师手袋、手表、鞋子、服装等
2019/03/16 全球购物
加拿大户外探险购物网站:SAIL
2020/06/27 全球购物
Java程序员面试题
2013/07/15 面试题
师范大学毕业自我鉴定
2013/11/21 职场文书
酒店节能减排方案
2014/05/26 职场文书
学生检讨书怎么写?
2014/10/10 职场文书
《静夜思》教学反思
2016/02/17 职场文书
如何做好工作总结!
2019/04/10 职场文书
python 实现定时任务的四种方式
2021/04/01 Python
MySQL命令行操作时的编码问题详解
2021/04/14 MySQL