vuejs实现标签选项卡动态更改css样式的方法


Posted in Javascript onMay 31, 2018

html

<ul class="header-list"> 
    <li v-cloak v-for="(item,index) in headerList" v-on:click="selectMainTheme(index)"><a href="java:;" rel="external nofollow" :class="{'active':idx == index}">{{item.name}}</a></li> 
</ul>

js

var app = new Vue({ 
    el:"#app", 
    router, 
    data:{ 
      m:"hello vue.js", 
      active:'2', 
      idx:'0',  //默认选择首页 
      headerList:[ 
        {name:'首页1'}, 
        {name:'首页2'}, 
        {name:'首页3'}, 
        {name:'首页4'}, 
        {name:'首页5'}, 
        {name:'首页6'} 
      ] 
    }, 
    methods:{ 
      // 1.选择 
      selectMainTheme:function(index){ 
        console.log("selectMainTheme" + index); 
        console.log("idx" + this.idx); 
        this.idx = index; 
      } 
      //  
    }   
});

总结

以上所述是小编给大家介绍的vuejs实现标签选项卡动态更改css样式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript面象对象成员、共享成员变量实验
Nov 19 Javascript
js 自动播放的实例代码
Nov 19 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
Mar 19 Javascript
node.js中的buffer.copy方法使用说明
Dec 14 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
Mar 20 Javascript
纯js模拟div层弹性运动的方法
Jul 27 Javascript
Bootstrap媒体对象的实现
May 01 Javascript
jQuery控制元素隐藏和显示
Mar 03 Javascript
Kindeditor单独调用多图上传实例
Jul 31 Javascript
Vue 莹石摄像头直播视频实例代码
Aug 31 Javascript
layer扩展打开/关闭动画的方法
Sep 23 Javascript
JavaScript实现淘宝商品图切换效果
Apr 29 Javascript
Vue组件之极简的地址选择器的实现
May 31 #Javascript
node跨域转发 express+http-proxy-middleware的使用
May 31 #Javascript
Vue实现侧边菜单栏手风琴效果实例代码
May 31 #Javascript
Node.js笔记之process模块解读
May 31 #Javascript
Vue组件中prop属性使用说明实例代码详解
May 31 #Javascript
用JS实现根据当前时间随机生成流水号或者订单号
May 31 #Javascript
Vue2 轮播图slide组件实例代码
May 31 #Javascript
You might like
php判断手机访问还是电脑访问示例分享
2014/01/20 PHP
php源码分析之DZX1.5随机数函数random用法
2015/06/17 PHP
PHP实现十进制、二进制、八进制和十六进制转换相关函数用法分析
2017/04/25 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
javascript concat数组累加 示例
2009/09/03 Javascript
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
2012/10/11 Javascript
Jquery实现页面加载时弹出对话框代码
2013/04/19 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
2013/04/27 Javascript
JS实现点击链接取消跳转效果的方法
2014/01/24 Javascript
javascript引用类型之时间Date和数组Array
2015/08/27 Javascript
jQuery焦点图左右转换效果
2016/12/12 Javascript
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
vue.js实现的经典计算器/科学计算器功能示例
2018/07/11 Javascript
Vue登录注册并保持登录状态的方法
2018/08/17 Javascript
es6函数之尾递归用法实例分析
2020/04/25 Javascript
vue实现公告栏文字上下滚动效果的示例代码
2020/06/16 Javascript
React实现阿里云OSS上传文件的示例
2020/08/10 Javascript
使用Python脚本将Bing的每日图片作为桌面的教程
2015/05/04 Python
Python捕捉和模拟鼠标事件的方法
2015/06/03 Python
python3.6数独问题的解决
2019/01/21 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
Python实现大数据收集至excel的思路详解
2020/01/03 Python
pandas中read_csv、rolling、expanding用法详解
2020/04/21 Python
python程序如何进行保存
2020/07/03 Python
华为c/c++笔试题
2016/01/25 面试题
测试工程师职业规划书
2014/02/06 职场文书
中式婚礼主持词
2014/03/13 职场文书
法学专业毕业生求职信
2014/06/12 职场文书
大学社团招新的通讯稿
2014/09/10 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
追讨欠款律师函
2015/06/24 职场文书
python基于tkinter实现gif录屏功能
2021/05/19 Python
springboot 启动如何排除某些bean的注入
2021/08/02 Java/Android
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python
关于Nginx中虚拟主机的一些冷门知识小结
2022/03/03 Servers