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与Prototype并存的冲突的解决方法
Aug 29 Javascript
jquery text,radio,checkbox,select操作实现代码
Jul 09 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
Aug 07 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
Feb 13 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
May 04 Javascript
基于Vue.js实现数字拼图游戏
Aug 02 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
Oct 10 Javascript
浅谈jquery上下滑动的注意事项
Oct 13 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
Jul 03 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
Oct 24 Javascript
setTimeout与setInterval的区别浅析
Mar 23 Javascript
浅谈对于react-thunk中间件的简单理解
May 01 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使用Jpgraph绘制简单X-Y坐标图的方法
2015/06/10 PHP
AJAX的使用方法详解
2017/04/29 PHP
javascript操作文本框readOnly
2007/05/15 Javascript
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
js重写alert控件(适合学习js的新手朋友)
2014/08/24 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
2015/08/11 Javascript
详解javascript数组去重问题
2015/11/06 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
2016/05/17 Javascript
使用vue.js实现联动效果的示例代码
2017/01/10 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
JavaScript操作文件_动力节点Java学院整理
2017/06/30 Javascript
简单谈谈React中的路由系统
2017/07/25 Javascript
JavaScript 异步调用
2017/10/25 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
2018/03/01 Javascript
node全局变量__dirname与__filename的区别
2019/01/14 Javascript
js实现网页同时进行多个倒计时功能
2019/02/25 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
2019/04/10 Javascript
Vue 递归多级菜单的实例代码
2019/05/05 Javascript
使用vue打包进行云服务器上传的问题
2020/03/02 Javascript
使用python 获取进程pid号的方法
2014/03/10 Python
Python 高级专用类方法的实例详解
2017/09/11 Python
使用python获取csv文本的某行或某列数据的实例
2018/04/03 Python
flask框架中勾子函数的使用详解
2018/08/01 Python
Python爬取成语接龙类网站
2018/10/19 Python
GAP美国官网:美国休闲时尚品牌
2016/08/26 全球购物
后勤自我鉴定
2013/10/13 职场文书
《大自然的语言》教学反思
2014/04/08 职场文书
安全生产管理责任书
2014/04/16 职场文书
高中军训的心得体会
2014/09/01 职场文书
幼儿园教师师德表现自我评价
2015/03/05 职场文书
舞蹈社团活动总结
2015/05/07 职场文书
2015年大学宣传部工作总结
2015/05/26 职场文书
红高粱观后感
2015/06/10 职场文书
初中生入团申请书范文(五篇)
2019/10/16 职场文书
Go语言实现Snowflake雪花算法
2021/06/08 Golang