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 ui dialog里调用datepicker的问题
Aug 06 Javascript
JS 控制非法字符的输入代码
Dec 04 Javascript
jQuery validate 中文API 附validate.js中文api手册
Jul 31 Javascript
基于jquery的一个拖拽到指定区域内的效果
Sep 21 Javascript
关于IE BUG与字符串截取substr的解决办法
Apr 10 Javascript
js格式化金额可选是否带千分位以及保留精度
Jan 28 Javascript
JavaScript数字和字符串转换示例
Mar 26 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
Jan 26 Javascript
详解javascript new的运行机制
Jan 26 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
Nov 03 Javascript
浅谈vue父子组件怎么传值
Jul 21 Javascript
使用JavaScript实现贪吃蛇游戏
Sep 29 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
ThinkPHP进程计数类Process用法实例详解
2015/09/25 PHP
ucenter中词语过滤原理分析
2016/07/13 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
ThinkPHP框架实现FTP图片上传功能示例
2019/04/08 PHP
Javascript 不能释放内存.
2006/09/07 Javascript
Javascript valueOf 使用方法
2008/12/28 Javascript
MooTools 1.2介绍
2009/09/14 Javascript
ajax java 实现自动完成功能
2012/12/19 Javascript
js解决弹窗问题实现班级跳转DIV示例
2014/01/06 Javascript
总结Node.js中的一些错误类型
2016/08/15 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
2016/10/27 Javascript
js仿百度音乐全选操作
2017/01/13 Javascript
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
浅谈Vuex注入Vue生命周期的过程
2019/05/20 Javascript
基于Proxy的小程序状态管理实现
2019/06/14 Javascript
Python映射拆分操作符用法实例
2015/05/19 Python
讲解Python中fileno()方法的使用
2015/05/24 Python
Python中for循环和while循环的基本使用方法
2015/08/21 Python
Python3中的真除和Floor除法用法分析
2016/03/16 Python
python+opencv实现的简单人脸识别代码示例
2017/11/14 Python
python使用Pycharm创建一个Django项目
2018/03/05 Python
Python通过TensorFlow卷积神经网络实现猫狗识别
2019/03/14 Python
Python自动化导出zabbix数据并发邮件脚本
2019/08/16 Python
Python绘制全球疫情变化地图的实例代码
2020/04/20 Python
python3.x中安装web.py步骤方法
2020/06/23 Python
python判断元素是否存在的实例方法
2020/09/24 Python
用纯css3实现的图片放大镜特效效果非常不错
2014/09/02 HTML / CSS
怎样声明接口
2014/09/19 面试题
优秀研究生自我鉴定
2013/12/04 职场文书
应届毕业生求职信范文分享
2013/12/26 职场文书
最新党员思想汇报
2014/01/01 职场文书
翻译学院毕业生自荐书
2014/02/02 职场文书
工作求职信
2014/07/04 职场文书
医院领导班子四风问题对照检查材料
2014/10/26 职场文书
德劲DE1105机评
2022/04/05 无线电
不负正版帝国之名 《重返帝国》引领SLG手游制作新的标杆
2022/04/07 其他游戏