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 相关文章推荐
Jquery在IE7下无法使用 $.ajax解决方法
Nov 11 Javascript
关于全局变量和局部变量的那些事
Jan 11 Javascript
js判断输入是否为数字的具体实例
Aug 03 Javascript
jquery设置控件位置的方法
Aug 21 Javascript
JS实现Fisheye效果动感放大菜单代码
Oct 21 Javascript
如何让一个json文件显示在表格里【实现代码】
May 09 Javascript
jquery实现input框获取焦点的方法
Feb 06 Javascript
关于vue面试题汇总
Mar 20 Javascript
JS使用队列对数组排列,基数排序算法示例
Mar 02 Javascript
JavaScript console的使用方法实例分析
Apr 28 Javascript
浅谈vue中$bus的使用和涉及到的问题
Jul 28 Javascript
Vue.js中使用Vuex实现组件数据共享案例
Jul 31 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数组应该有多大的分析
2009/07/30 PHP
PHP 采集程序中常用的函数
2009/12/09 PHP
PHP在不同页面间传递Json数据示例代码
2013/06/08 PHP
PHP定时任务延缓执行的实现
2014/10/08 PHP
PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
2015/11/15 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
JavaScript Prototype对象
2009/01/07 Javascript
网页自动跳转代码收集
2009/09/27 Javascript
JQuery从头学起第二讲
2010/07/04 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
2014/06/20 Javascript
JavaScript实现点击按钮直接打印
2016/01/06 Javascript
javascript先序遍历DOM树的方法
2016/02/27 Javascript
基于bootstrap实现广告轮播带图片和文字效果
2016/07/22 Javascript
基于AngularJS的拖拽文件上传的实例代码
2017/07/15 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
2018/01/24 Javascript
JS实现图片旋转动画效果封装与使用示例
2018/07/09 Javascript
react-router 路由切换动画的实现示例
2018/12/03 Javascript
[02:38]DOTA2亚洲邀请赛小组赛精彩集锦:Wings完美团击溃对手
2017/03/29 DOTA
python网络编程学习笔记(九):数据库客户端 DB-API
2014/06/09 Python
Python自动化开发学习之三级菜单制作
2017/07/14 Python
python中for循环输出列表索引与对应的值方法
2018/11/07 Python
Django ORM多对多查询方法(自定义第三张表&amp;ManyToManyField)
2019/08/09 Python
Python之Class&amp;Object用法详解
2019/12/25 Python
使用python创建Excel工作簿及工作表过程图解
2020/05/27 Python
Selenium结合BeautifulSoup4编写简单的python爬虫
2020/11/06 Python
意大利折扣和优惠券网站:Groupalia
2019/10/09 全球购物
英国豪华家具和家居用品购物网站:Teddy Beau
2020/10/12 全球购物
大学生秋游活动方案
2014/02/17 职场文书
农村党建工作汇报材料
2014/10/27 职场文书
党的群众路线学习笔记
2014/11/06 职场文书
体育教师研修感悟
2015/11/18 职场文书
会议主持词通用版
2019/04/02 职场文书
创业计划书之花店
2019/09/20 职场文书
MySQL大小写敏感的注意事项
2021/05/24 MySQL
解决pytorch读取自制数据集出现过的问题
2021/05/31 Python
Python中 range | np.arange | np.linspace三者的区别
2022/03/22 Python