在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 相关文章推荐
js关闭父窗口时关闭子窗口
Apr 01 Javascript
js为数字添加逗号并格式化数字的代码
Aug 23 Javascript
用js传递value默认值的示例代码
Sep 11 Javascript
JavaScript简单获取页面图片原始尺寸的方法
Jun 21 Javascript
jQuery插件扩展extend的简单实现原理
Jun 24 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
Mar 10 Javascript
详解JS中的attribute属性
Apr 25 Javascript
微信小程序 rich-text的使用方法
Aug 04 Javascript
微信小程序movable view移动图片和双指缩放实例代码
Aug 08 Javascript
微信小程序简单实现form表单获取输入数据功能示例
Nov 30 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
Aug 29 Javascript
30分钟快速实现小程序语音识别功能
Nov 27 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
这部番真是良心,画质好到像风景区,剧情让人跟着小公会热血沸腾
2020/03/10 日漫
长波有什么东西
2021/03/01 无线电
php XPath对XML文件查找及修改实现代码
2011/07/27 PHP
yii用户注册表单验证实例
2015/12/26 PHP
PHP类型约束用法示例
2016/09/28 PHP
js prototype 格式化数字 By shawl.qiu
2007/04/02 Javascript
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
2010/08/30 Javascript
理解Javascript_14_函数形式参数与arguments
2010/10/20 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
2016/06/10 Javascript
JavaScript实现垂直向上无缝滚动特效代码
2016/11/23 Javascript
Node.js 使用命令行工具检查更新
2017/06/08 Javascript
基于vue1和vue2获取dom元素的方法
2018/03/17 Javascript
JS实现左边列表移到到右边列表功能
2018/03/28 Javascript
webpack4 CSS Tree Shaking的使用
2018/09/03 Javascript
React router动态加载组件之适配器模式的应用详解
2018/09/12 Javascript
Vue项目路由刷新的实现代码
2019/04/17 Javascript
vue v-for直接循环数字实例
2019/11/07 Javascript
python基础教程之简单入门说明(变量和控制语言使用方法)
2014/03/25 Python
Python 去除字符串中指定字符串
2020/03/05 Python
Pycharm pyuic5实现将ui文件转为py文件,让UI界面成功显示
2020/04/08 Python
PyCharm2020.1.2社区版安装,配置及使用教程详解(Windows)
2020/08/07 Python
CSS的background属性及CSS3的背景图片设置总结
2016/06/13 HTML / CSS
canvas实现飞机打怪兽射击小游戏的示例代码
2018/07/09 HTML / CSS
计算机网络毕业生自荐信
2013/10/01 职场文书
会计职业生涯规划书
2014/01/13 职场文书
先进党支部事迹材料
2014/01/13 职场文书
运动会广播稿400字
2014/01/25 职场文书
《长城》教学反思
2014/02/14 职场文书
2014年机关植树节活动方案
2014/02/27 职场文书
旅游管理专业大学生职业规划书
2014/02/27 职场文书
2015年初中生自我评价范文
2015/03/03 职场文书
村党组织公开承诺书
2015/04/30 职场文书
谢师宴学生致辞
2015/07/27 职场文书
礼仪培训心得体会
2016/01/22 职场文书