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 相关文章推荐
在UpdatePanel内jquery easyui效果失效的解决方法
Apr 11 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
May 07 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
Mar 28 Javascript
详解WordPress开发中get_current_screen()函数的使用
Jan 11 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
Jan 18 Javascript
浅析BootStrap栅格系统
Jun 07 Javascript
用js写的一个路由(简单实例)
Sep 24 Javascript
jQuery实现表格元素动态创建功能
Jan 09 Javascript
angularjs中判断ng-repeat是否迭代完的实例
Sep 12 Javascript
详解ESLint在Vue中的使用小结
Oct 15 Javascript
在layui中select更改后生效的方法
Sep 05 Javascript
vue实现简单瀑布流布局
May 28 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下通过系统信号量加锁方式获取递增序列ID
2009/09/25 PHP
最新用php获取谷歌PR值算法,附上php查询PR值代码示例
2011/12/25 PHP
php中实现精确设置session过期时间的方法
2014/07/17 PHP
PHP中提问频率最高的11个面试题和答案
2014/09/02 PHP
PHP输出日历表代码实例
2015/03/27 PHP
php 获取文件行数的方法总结
2016/10/11 PHP
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
javascript跑马灯抽奖实例讲解
2020/04/17 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
2016/05/07 Javascript
微信小程序实现页面跳转传值的方法
2017/10/12 Javascript
浅谈Node Inspector 代理实现
2017/10/19 Javascript
AngularJS实时获取并显示密码的方法
2018/02/06 Javascript
vue点击标签切换选中及互相排斥操作
2020/07/17 Javascript
python实现ip查询示例
2014/03/26 Python
python中正则表达式的使用详解
2014/10/17 Python
python输出指定月份日历的方法
2015/04/23 Python
python实现识别相似图片小结
2016/02/22 Python
Python+OpenCV 实现图片无损旋转90°且无黑边
2019/12/12 Python
tf.concat中axis的含义与使用详解
2020/02/07 Python
Python:__eq__和__str__函数的使用示例
2020/09/26 Python
python 实现波浪滤镜特效
2020/12/02 Python
Python字符串的15个基本操作(小结)
2021/02/03 Python
Cocopanda波兰:购买化妆品、护肤品、护发和香水
2020/05/25 全球购物
如何拷贝一整个Java对象,包括它的状态
2013/12/27 面试题
关于毕业的中学校园广播稿
2014/01/26 职场文书
一月红领巾广播稿
2014/02/11 职场文书
学校三节实施方案
2014/06/09 职场文书
终止劳动合同证明书样本
2014/11/19 职场文书
2014年招生工作总结
2014/11/26 职场文书
处级干部考察材料
2014/12/24 职场文书
学生会个人总结范文
2015/02/15 职场文书
总账会计岗位职责
2015/04/02 职场文书
2015年采购部工作总结
2015/04/23 职场文书
2015年幼儿园教育教学工作总结
2015/05/25 职场文书
傲慢与偏见电影观后感
2015/06/10 职场文书