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 相关文章推荐
escape、encodeURI、encodeURIComponent等方法的区别比较
Dec 27 Javascript
document.forms用法示例介绍
Jun 26 Javascript
js的window.showModalDialog及window.open用法实例分析
Jan 29 Javascript
AngularJS基础学习笔记之表达式
May 10 Javascript
使用requestAnimationFrame实现js动画性能好
Aug 06 Javascript
js跨域请求数据的3种常用的方法
Dec 01 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
Dec 04 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
Mar 27 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
Jun 17 Javascript
vue项目部署上线遇到的问题及解决方法
Jun 10 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
Sep 03 Javascript
javascript实现贪吃蛇小练习
Jul 05 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/01/27 PHP
PHP会话控制:Session与Cookie详解
2014/09/27 PHP
PHP扩展迁移为PHP7扩展兼容性问题记录
2016/02/15 PHP
javascript支持firefox,ie7页面布局拖拽效果代码
2007/12/20 Javascript
Javascript将string类型转换int类型
2010/12/09 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
2011/11/19 Javascript
jQuery中:checkbox选择器用法实例
2015/01/03 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
2016/04/19 Javascript
socket.io学习教程之深入学习篇(三)
2017/04/29 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
2017/08/21 Javascript
Angular4学习笔记之根模块与Ng模块
2017/09/09 Javascript
使用vue的transition完成滑动过渡的示例代码
2018/06/25 Javascript
JavaScript制作3D旋转相册
2020/08/02 Javascript
el-table树形表格表单验证(列表生成序号)
2020/05/31 Javascript
写一个Vue loading 插件
2020/11/09 Javascript
原生js实现点击按钮复制内容到剪切板
2020/11/19 Javascript
[01:09:13]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第三场 1月19日
2021/03/11 DOTA
python实现定时同步本机与北京时间的方法
2015/03/24 Python
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
在Django的模型和公用函数中使用惰性翻译对象
2015/07/27 Python
python僵尸进程产生的原因
2017/07/21 Python
python连接数据库的方法
2017/10/19 Python
Python中将变量按行写入txt文本中的方法
2018/04/03 Python
python装饰器简介---这一篇也许就够了(推荐)
2019/04/01 Python
Python之修改图片像素值的方法
2019/07/03 Python
Python3显示当前时间、计算时间差及时间加减法示例代码
2019/09/07 Python
python集合删除多种方法详解
2020/02/10 Python
Html5在手机端调用相机的方法实现
2020/05/13 HTML / CSS
NBA德国官方网上商店:NBA Store德国
2018/04/13 全球购物
业务主管岗位职责
2013/11/20 职场文书
反腐倡廉警示教育活动总结
2014/05/05 职场文书
服装设计师求职信
2014/06/04 职场文书
实习介绍信模板
2015/01/30 职场文书
入党介绍人意见2015
2015/06/01 职场文书
营销策划分析:怎么策划才能更好销量产品?
2019/09/04 职场文书