在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 相关文章推荐
javascript vvorld 在线加密破解方法
Nov 13 Javascript
Jquery之Ajax运用 学习运用篇
Sep 26 Javascript
JavaScript实现自己的DOM选择器原理及代码
Mar 04 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
Dec 10 Javascript
JS回调函数简单用法示例
Feb 09 Javascript
深入理解javascript的getTime()方法
Feb 16 Javascript
js仿网易表单及时验证功能
Mar 07 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
Sep 18 Javascript
vue 实现单选框设置默认选中值
Nov 07 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
Mar 16 Javascript
纯js+css实现在线时钟
Aug 18 Javascript
vue 中使用print.js导出pdf操作
Nov 13 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
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
PHP直接修改表内容DataGrid功能实现代码
2015/09/24 PHP
PHP框架Laravel插件Pagination实现自定义分页
2020/04/22 PHP
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
2016/07/21 PHP
PHPCMS手机站伪静态设置详细教程
2017/02/06 PHP
PHP通过文件路径获取文件名的实例代码
2018/10/14 PHP
如何让PHP编码更加好看利于阅读
2019/05/12 PHP
javascript 动态设置已知select的option的value值的代码
2009/12/16 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
2010/11/19 Javascript
JavaScript网页定位详解
2014/01/13 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
js实现进度条的方法
2015/02/13 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
2015/10/22 Javascript
详解Vue生命周期的示例
2017/03/10 Javascript
js实现json数组分组合并操作示例
2019/02/12 Javascript
vue登录页面cookie的使用及页面跳转代码
2019/07/10 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
2020/05/28 Javascript
node.js通过Sequelize 连接MySQL的方法
2020/12/28 Javascript
Python拼接微信好友头像大图的实现方法
2018/08/01 Python
把django中admin后台界面的英文修改为中文显示的方法
2019/07/26 Python
python lambda表达式(匿名函数)写法解析
2019/09/16 Python
HTML5实现自带进度条和滑块滑杆效果
2018/04/17 HTML / CSS
Radley英国官网:英国莱德利小狗包
2019/03/21 全球购物
写自荐信的七个技巧
2013/10/15 职场文书
竞聘演讲稿范文
2014/01/12 职场文书
环境建设实施方案
2014/03/14 职场文书
优秀班集体先进事迹材料
2014/05/28 职场文书
汉语专业毕业生自荐信
2014/07/06 职场文书
六查六看个人剖析材料
2014/10/14 职场文书
2015年反腐倡廉工作总结
2015/05/14 职场文书
指导教师推荐意见
2015/06/05 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书
2016年区委书记抓基层党建工作公开承诺书
2016/03/25 职场文书
市语委办2016年第十九届“推普周”活动总结
2016/04/05 职场文书
Mysql 用户权限管理实现
2021/05/25 MySQL
Python爬虫之用Xpath获取关键标签实现自动评论盖楼抽奖(二)
2021/06/07 Python