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 相关文章推荐
js文字滚动停顿效果代码
Jun 28 Javascript
jquery lazyload延迟加载技术的实现原理分析
Jan 24 Javascript
Javascript 面试题随笔
Mar 31 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
Jun 26 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
Dec 19 Javascript
Angularjs实现搜索关键字高亮显示效果
Jan 17 Javascript
angular4自定义组件详解
Sep 28 Javascript
详解用Node.js写一个简单的命令行工具
Mar 01 Javascript
Vue中的基础过渡动画及实现原理解析
Dec 04 Javascript
js实现移动端tab切换时下划线滑动效果
Sep 08 Javascript
JS+Canvas实现五子棋游戏
Aug 26 Javascript
Vue js with语句原理及用法解析
Sep 03 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在Linxu下执行时的文件权限方法
2017/06/07 PHP
laravel5.6 框架操作数据 Eloquent ORM用法示例
2020/01/26 PHP
用javascript实现的仿Flash广告图片轮换效果
2007/04/24 Javascript
SWFObject Flash js调用类
2008/07/08 Javascript
jquery $.ajax各个事件执行顺序
2010/10/15 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
2015/03/02 Javascript
JS获取Table中td值的方法
2015/03/19 Javascript
关于javascript中dataset的问题小结
2015/11/16 Javascript
js判断当前页面在移动设备还是在PC端中打开
2016/01/06 Javascript
jquery实现左右无缝轮播图
2020/07/31 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
2017/07/10 Javascript
Vue自定义事件(详解)
2017/08/19 Javascript
vue引入jq插件的实例讲解
2017/09/12 Javascript
Vue 使用beforeEach实现登录状态检查功能
2019/10/31 Javascript
es6数组之扩展运算符操作实例分析
2020/04/25 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
2020/08/07 Javascript
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
python实现随机密码字典生成器示例
2014/04/09 Python
python复制与引用用法分析
2015/04/08 Python
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
浅析使用Python操作文件
2017/07/31 Python
简单实现Python爬取网络图片
2018/04/01 Python
Python封装原理与实现方法详解
2018/08/28 Python
树莓派+摄像头实现对移动物体的检测
2019/06/22 Python
基于Python中isfile函数和isdir函数使用详解
2019/11/29 Python
python判断一个变量是否已经设置的方法
2020/08/13 Python
使用django自带的user做外键的方法
2020/11/30 Python
html5的新玩法——语音搜索
2013/01/03 HTML / CSS
Arti-shopping中文官网:大型海外商品一站式直邮平台
2020/03/23 全球购物
Stührling手表官方网站:男女高品质时尚手表的领先零售商
2021/01/07 全球购物
高中毕业生生活的自我评价
2013/12/08 职场文书
关爱残疾人标语
2014/06/25 职场文书
回门宴新娘答谢词
2015/09/29 职场文书
甜美蛋糕店的创业计划书模板,拿来即用!
2019/08/21 职场文书
MySQL中出现乱码问题的终极解决宝典
2021/05/26 MySQL
详解Python中__new__方法的作用
2022/03/31 Python