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鼠标划过切换效果
Jun 30 Javascript
ajax更新数据后,jquery、jq失效问题
Mar 16 Javascript
JavaScript实现页面滚动图片加载(仿lazyload效果)
Jul 22 Javascript
js综合应用实例简单的表格统计
Sep 03 Javascript
通过length属性判断jquery对象是否存在
Oct 18 Javascript
JQuery实现的图文自动轮播效果插件
Jun 19 Javascript
浅谈javascript获取元素transform参数
Jul 24 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
Aug 17 Javascript
浅析jQuery中使用$所引发的问题
May 29 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
js常见遍历操作小结
Jun 06 Javascript
vue组件命名和props命名代码详解
Sep 01 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面向对象自动加载机制原理与用法分析
2016/10/14 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
js操纵跨frame的三级联动select下拉选项实例介绍
2013/05/19 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
2014/06/06 Javascript
js库Modernizr的介绍和使用
2015/05/07 Javascript
jquery图片滚动放大代码分享(2)
2015/08/28 Javascript
js实现内容显示并使用json传输数据
2016/03/16 Javascript
详谈Angular路由与Nodejs路由的区别
2017/03/05 NodeJs
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
Node.js 基础教程之全局对象
2017/08/06 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
2017/10/01 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
2017/12/07 Javascript
深入浅析JSONAPI在PHP中的应用
2017/12/24 Javascript
浅谈Vue网络请求之interceptors实际应用
2018/02/28 Javascript
前端axios下载excel文件(二进制)的处理方法
2018/07/31 Javascript
vue实现tab栏点击高亮效果
2020/08/19 Javascript
如何在Python中编写并发程序
2016/02/27 Python
在Python中字典根据多项规则排序的方法
2019/01/21 Python
Python File(文件) 方法整理
2019/02/18 Python
python能做什么 python的含义
2019/10/12 Python
CSS3实例分享--超炫checkbox复选框和radio单选框
2014/09/01 HTML / CSS
详解HTML5新增标签
2017/11/27 HTML / CSS
美国最大的城市服装和运动鞋零售商:Jimmy Jazz
2016/11/19 全球购物
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
英国最大的在线亚洲杂货店:Red Rickshaw
2020/03/22 全球购物
LVMH旗下最大的奢侈品网站平台:24S
2020/05/24 全球购物
应用电子专业学生的自我评价
2013/10/16 职场文书
演讲稿怎么写才完美
2014/01/02 职场文书
奥巴马演讲稿
2014/01/08 职场文书
将相和教学反思
2014/02/04 职场文书
县政府办公室领导班子个人对照检查材料
2014/09/16 职场文书
校园广播站开场白
2015/06/01 职场文书
正规欠条模板
2015/07/03 职场文书
2016年大学生就业指导课心得体会
2015/10/09 职场文书
MySQL 时间类型的选择
2021/06/05 MySQL
mysql中关键词exists的用法实例详解
2022/06/10 MySQL