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 模板数据绑定插件的使用方法详解
Jul 08 Javascript
node.js中的fs.chownSync方法使用说明
Dec 16 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
Jan 26 Javascript
jQuery实现首页图片淡入淡出效果的方法
Jun 10 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
Aug 29 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
Mar 02 Javascript
vue :src 文件路径错误问题的解决方法
May 15 Javascript
如何用Node写页面爬虫的工具集
Oct 26 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
Apr 11 Javascript
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
vue实现几秒后跳转新页面代码
Sep 09 Javascript
vue中实现弹出层动画效果的示例代码
Sep 25 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按百分比生成缩略图的代码分享
2014/05/10 PHP
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
2016/07/02 PHP
laravel实现按月或天或小时统计mysql数据的方法
2019/10/09 PHP
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
2014/12/29 Javascript
jquery实现Ctrl+Enter提交表单的方法
2015/07/21 Javascript
第一次接触神奇的Bootstrap菜单和导航
2016/08/01 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
2016/12/30 Javascript
React学习笔记之条件渲染(一)
2017/07/02 Javascript
Javascript es7中比较实用的两个方法示例
2017/07/21 Javascript
ES6入门教程之let、const的使用方法
2019/04/13 Javascript
vue中格式化时间过滤器代码实例
2019/04/17 Javascript
nodejs对项目下所有空文件夹创建gitkeep的方法
2019/08/02 NodeJs
使用 JavaScript 创建并下载文件(模拟点击)
2019/10/25 Javascript
js 函数性能比较方法
2020/08/24 Javascript
[01:32]2016国际邀请赛中国区预选赛CDEC战队教练采访
2016/06/26 DOTA
无法使用pip命令安装python第三方库的原因及解决方法
2018/06/12 Python
Python标准库shutil用法实例详解
2018/08/13 Python
对DataFrame数据中的重复行,利用groupby累加合并的方法详解
2019/01/30 Python
详解python中@的用法
2019/03/27 Python
Python实现的删除重复文件或图片功能示例【去重】
2019/04/23 Python
浅谈Python大神都是这样处理XML文件的
2019/05/31 Python
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
Python实现最常见加密方式详解
2019/07/13 Python
关于python3中setup.py小概念解析
2019/08/22 Python
window7下的python2.7版本和python3.5版本的opencv-python安装过程
2019/10/24 Python
Python pandas自定义函数的使用方法示例
2019/11/20 Python
纯CSS3实现的井字棋游戏
2020/11/25 HTML / CSS
美国在线精品家居网站:Burke Decor
2017/04/12 全球购物
世界上第一个创建了罩杯系统的美国内衣品牌:Maidenform
2019/03/23 全球购物
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
会计专业推荐信
2013/10/29 职场文书
请假条的格式
2014/04/11 职场文书
庆六一文艺汇演活动方案
2014/08/26 职场文书
2019关于垃圾分类处理的调查报告
2019/12/26 职场文书
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python