在vue中使用v-bind:class的选项卡方法


Posted in Javascript onSeptember 27, 2018

//vue中的选项卡的实现,数据驱动dom,因此需要使用数据,来改变class;

详细见代码实现

<style>
ul{overflow: hidden;}
ul li{float: left;width: 150px;height: 35px;line-height: 35px;border: 1px solid red;list-style: none;cursor: pointer;}
ul li.active{background-color: yellow}
</style>

<div id="app">
<ul><li v-for="(item,index) in items" @click="setColor(index)" :key="item.message" :class="{active:index == num}">{{item.message}}
</li>
</ul>
</div>

<script>
// 使用v-bind:class实现 通过改变num实现进而改变active的布尔值 vue中的选项卡的功能 绑定class 绑定布尔值的实现 
var vm = new Vue({
el:"#app",
data(){
return {
items: [  
{ message: 'Foo' },  
{ message: 'Bar' },  
{ message: 'Jack' }
 ],num:0
}
},
methods:{
setColor(index){
this.num = index
}
}
})
</script>

以上这篇在vue中使用v-bind:class的选项卡方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ExtJS GTGrid 简单用户管理
Jul 01 Javascript
javascript 动态修改样式和层叠样式表代码
Apr 27 Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
Jul 27 Javascript
ko knockoutjs动态属性绑定技巧应用
Nov 14 Javascript
通过JS来判断页面控件是否获取焦点
Jan 03 Javascript
Extjs grid panel自带滚动条失效的解决方法
Sep 11 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
Dec 22 Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 Javascript
jQuery Validate初步体验(一)
Dec 12 Javascript
jquery操作select取值赋值与设置选中实例
Feb 28 Javascript
JavaScript数据结构之二叉树的查找算法示例
Apr 13 Javascript
解决layui表格内文本超出隐藏的问题
Sep 12 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
Sep 27 #Javascript
详解如何在vue项目中使用lodop打印插件
Sep 27 #Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
Sep 27 #Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
Sep 27 #Javascript
swiper在angularjs中使用循环轮播失效的解决方法
Sep 27 #Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
Sep 27 #Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
Sep 27 #Javascript
You might like
php通过前序遍历树实现无需递归的无限极分类
2015/07/10 PHP
Symfony2安装的方法(2种方法)
2016/02/04 PHP
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
2007/03/10 Javascript
jQuery Lightbox 图片展示插件使用说明
2010/04/25 Javascript
JQuery结合CSS操作打印样式的方法
2013/12/24 Javascript
Linux下使用jq友好的打印JSON技巧分享
2014/11/18 Javascript
如何编写高质量JS代码
2014/12/28 Javascript
JS特效实现图片自动播放并可控的效果
2015/07/31 Javascript
JavaScript+CSS无限极分类效果完整实现方法
2015/12/22 Javascript
Vue.js实现移动端短信验证码功能
2017/03/29 Javascript
二维码图片生成器QRCode.js简单介绍
2017/08/18 Javascript
JS脚本实现网页自动秒杀点击
2018/01/11 Javascript
微信小程序实现折叠面板
2018/01/31 Javascript
深入浅出了解Node.js Streams
2019/05/27 Javascript
js实现小时钟效果
2020/03/25 Javascript
编写一个javascript元循环求值器的方法
2020/04/14 Javascript
Python中操作mysql的pymysql模块详解
2016/09/13 Python
PyQt5每天必学之切换按钮
2020/08/20 Python
使用Python的Django和layim实现即时通讯的方法
2018/05/25 Python
详解python实现识别手写MNIST数字集的程序
2018/08/03 Python
解决python中os.listdir()函数读取文件夹下文件的乱序和排序问题
2018/10/17 Python
Python实现的排列组合、破解密码算法示例
2019/04/12 Python
python两个_多个字典合并相加的实例代码
2019/12/26 Python
python中的django是做什么的
2020/07/31 Python
英国最大的在线床超市:Bed Star
2019/01/24 全球购物
高中生学习生活的自我评价
2013/10/09 职场文书
平安建设工作方案
2014/06/02 职场文书
销售员岗位职责
2014/06/09 职场文书
优质服务口号
2014/06/11 职场文书
群众路线教育实践活动学习笔记内容
2014/11/06 职场文书
七一建党节慰问信
2015/02/14 职场文书
党支部季度考核意见
2015/06/02 职场文书
2015年教师党员个人总结
2015/11/24 职场文书
《槐乡的孩子》教学反思
2016/02/20 职场文书
四则混合运算教学反思
2016/02/23 职场文书
pytorch中的 .view()函数的用法介绍
2022/03/17 Python