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 相关文章推荐
js控制web打印(局部打印)方法整理
May 29 Javascript
浅析Javascript ES6中的原生Promise
Aug 25 Javascript
node.js中module.exports与exports用法上的区别
Sep 02 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
Dec 16 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
Dec 18 Javascript
基于AGS JS开发自定义贴图图层
Mar 31 Javascript
详解在Vue中有条件地使用CSS类
Sep 30 Javascript
JS实现百度搜索接口及链接功能实例代码
Feb 02 Javascript
layui实现点击按钮给table添加一行
Aug 10 Javascript
如何在JavaScript中谨慎使用代码注释
Jun 21 Javascript
vue 组件间的通信之子组件向父组件传值的方式
Jul 29 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
Oct 21 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使用cookie保存登录用户名的方法
2015/01/26 PHP
PHP基于yii框架实现生成ICO图标
2015/11/13 PHP
PHP is_array() 检测变量是否是数组的实现方法
2016/06/13 PHP
PHP实现上传图片到 zimg 服务器
2016/10/19 PHP
PHP排序算法之堆排序(Heap Sort)实例详解
2018/04/21 PHP
PHP通过文件保存和更新信息的方法分析
2019/09/12 PHP
电子商务网站上的常用的js放大镜效果
2011/12/08 Javascript
jQuery实现可拖动的浮动层完整代码
2013/05/27 Javascript
javascript避免数字计算精度误差的方法详解
2014/03/05 Javascript
nodejs npm包管理的配置方法及常用命令介绍
2014/06/05 NodeJs
jquery制作多功能轮播图插件
2015/04/02 Javascript
jquery图片切换实例分析
2015/04/15 Javascript
jquery+html5烂漫爱心表白动画代码分享
2015/08/24 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
2016/03/11 Javascript
详解VS Code使用之Vue工程配置format代码格式化
2019/03/20 Javascript
原生JS封装拖动验证滑块的实现代码示例
2020/06/01 Javascript
合并百度影音的离线数据( with python 2.3)
2015/08/04 Python
python机器学习之神经网络(二)
2017/12/20 Python
Python的UTC时间转换讲解
2019/02/26 Python
python3连接mysql获取ansible动态inventory脚本
2020/01/19 Python
pytorch中的inference使用实例
2020/02/20 Python
Python线程threading模块用法详解
2020/02/26 Python
Pycharm pyuic5实现将ui文件转为py文件,让UI界面成功显示
2020/04/08 Python
python logging模块的使用
2020/09/07 Python
video实现有声音自动播放的实现方法
2020/05/20 HTML / CSS
写好求职应聘自荐信的三部曲
2013/09/21 职场文书
前台文员岗位职责
2013/12/28 职场文书
高一英语教学反思
2014/01/22 职场文书
知识竞赛主持词
2014/03/26 职场文书
爱心活动计划书
2014/04/26 职场文书
跑操口号
2014/06/12 职场文书
2014年销售部工作总结
2014/12/01 职场文书
钱学森电影观后感
2015/06/04 职场文书
与死神共舞观后感
2015/06/15 职场文书
小学主题班会教案
2015/08/17 职场文书
聘用合同范本
2015/09/21 职场文书