在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 相关文章推荐
jQuery计算textarea中文字数(剩余个数)的小程序
Nov 28 Javascript
jquery easyui combox一些实用的小方法
Dec 25 Javascript
js 事件截取enter按键页面提交事件示例代码
Mar 04 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
Nov 02 Javascript
javascript中indexOf技术详解
May 07 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
Jul 29 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
Jan 06 Javascript
JS图片等比例缩放方法完整示例
Aug 03 Javascript
codeMirror插件使用讲解
Jan 16 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
Feb 20 Javascript
javascript sort()对数组中的元素进行排序详解
Oct 13 Javascript
SSM VUE Axios详解
Oct 05 Vue.js
解决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/10/20 PHP
PHP错误机制知识汇总
2016/03/24 PHP
php-msf源码详解
2017/12/25 PHP
laravel-admin的图片删除实例
2019/09/30 PHP
extjs tabpanel限制选项卡数量实现思路及代码
2013/04/02 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
jquery显示隐藏input对象
2014/07/21 Javascript
javascript常用函数归纳整理
2014/10/31 Javascript
javascript实时显示北京时间的方法
2015/03/12 Javascript
Javascript中this关键字的一些小知识
2015/03/15 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
2015/05/26 Javascript
Bootstrap的modal拖动效果
2016/12/25 Javascript
bootstrap datetimepicker日期插件使用方法
2017/01/13 Javascript
JS实现的简单拖拽功能示例
2017/03/13 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
2017/08/08 jQuery
Vue单文件组件基础模板小结
2017/08/10 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
2017/10/27 Javascript
React组件内事件传参实现tab切换的示例代码
2018/07/04 Javascript
如何在js代码中消灭for循环实例详解
2018/07/29 Javascript
vue实现前端列表多条件筛选
2020/10/26 Javascript
[02:47]DOTA2英雄基础教程 野性怒吼兽王
2013/12/05 DOTA
python中sleep函数用法实例分析
2015/04/29 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
Python socket非阻塞模块应用示例
2019/09/12 Python
pytorch 获取tensor维度信息示例
2020/01/03 Python
带你学习Python如何实现回归树模型
2020/07/16 Python
Python实现给PDF添加水印的方法
2021/01/25 Python
python 统计list中各个元素出现的次数的几种方法
2021/02/20 Python
深入CSS3 动画效果的总结详解
2013/05/09 HTML / CSS
介绍一下游标
2012/01/10 面试题
代码中finally中的代码会不会执行
2012/02/06 面试题
韩语专业本科生求职信
2013/10/01 职场文书
父母寄语大全
2014/04/12 职场文书
2014国庆节演讲稿:祖国在我心中(400字)
2014/09/25 职场文书
2014年药店店长工作总结
2014/11/17 职场文书
使用Nginx搭载rtmp直播服务器的方法
2021/10/16 Servers