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 相关文章推荐
javascript while语句和do while语句的区别分析
Dec 08 Javascript
JavaScript中json对象和string对象之间相互转化
Dec 26 Javascript
如何用js控制frame的隐藏或显示的解决办法
Mar 20 Javascript
node.js中的buffer.toJSON方法使用说明
Dec 14 Javascript
浅谈javascript的Array.prototype.slice.call
Aug 31 Javascript
Jquery 全选反选实例代码
Nov 19 Javascript
JQuery fileupload插件实现文件上传功能
Mar 18 Javascript
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
微信小程序实现天气预报功能
Jul 18 Javascript
vue watch深度监听对象实现数据联动效果
Aug 16 Javascript
Vue 实现列表动态添加和删除的两种方法小结
Sep 07 Javascript
使用layer弹窗,制作编辑User信息页面的方法
Sep 27 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
中国的第一台收音机
2021/03/01 无线电
php 获取百度的热词数据的代码
2012/02/18 PHP
php cURL和Rolling cURL并发方式比较
2013/10/30 PHP
php 根据url自动生成缩略图并处理高并发问题
2014/01/23 PHP
PHP微信支付开发实例
2016/06/22 PHP
django中的ajax组件教程详解
2018/10/18 PHP
PHP PDOStatement::fetchAll讲解
2019/01/31 PHP
javascript中检测变量的类型的代码
2010/12/28 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
2011/03/28 Javascript
node在两个div之间移动,用ztree实现
2013/03/06 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
2014/06/09 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
javascript生成随机数方法汇总
2015/11/12 Javascript
js 获取当前web应用的上下文路径实现方法
2016/08/19 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
2017/08/21 Javascript
JS如何设置元素样式的方法示例
2017/08/28 Javascript
基于node.js实现爬虫的讲解
2019/02/18 Javascript
小程序登录/注册页面设计的实现代码
2019/05/24 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
2020/10/27 Javascript
python批量获取html内body内容的实例
2019/01/02 Python
Django 解决由save方法引发的错误
2020/05/21 Python
python3 通过 pybind11 使用Eigen加速代码的步骤详解
2020/12/07 Python
利用简洁的图片预加载组件提升html5移动页面的用户体验
2016/03/11 HTML / CSS
MATCHESFASHION.COM法国官网:英国奢侈品零售商
2018/01/04 全球购物
芬兰灯具网上商店:Nettilamppu.fi
2018/06/30 全球购物
大学生应聘推荐信范文
2013/11/19 职场文书
农场厂长岗位职责
2013/12/28 职场文书
教育孩子心得体会
2014/01/01 职场文书
心理健康活动总结
2014/04/30 职场文书
我们的节日元宵活动方案
2014/08/23 职场文书
2014年艾滋病防治工作总结
2014/12/10 职场文书
北京故宫导游词
2015/01/31 职场文书
慰问信格式
2015/02/14 职场文书
心灵捕手观后感
2015/06/02 职场文书
golang特有程序结构入门教程
2021/06/02 Python