vue实现动态列表点击各行换色的方法


Posted in Javascript onSeptember 13, 2018

只是模拟一练习 v-for v-on v-bind的一个简单demo

vue实现动态列表点击各行换色的方法

代码思路:

遍历出data里面的数据 v-for

给li加点击事件

绑定class样式 怎么控制样式的显示

通过 class的控制 v:bind:class={class:index==变量} 下标和class变量是否相等控制true false

代码:

<div id="app"> 
<ul>
<li v-for='(item,index) in arr' v-bind:class='{bg:index==isactive}'
@click='fn(index)'>{{item}}</li>
</ul> 
</div>

<script>
var vm=new Vue({
el:'#app',//el element 获取容器 vue作用的范围
data:{
isactive:0,
arr:['健康医疗','生活服务','信息安全','文化娱乐'], 
},
methods:{
fn:function(index){
//点击切换 变量的值 赋值为 index
console.log(index);
this.isactive=index;
}
}

})
</script>

以上这篇vue实现动态列表点击各行换色的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 继承详解(三)
Jul 13 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
Jan 06 Javascript
jQuery实现的简单提示信息插件
Dec 08 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
Mar 01 Javascript
正则表达式(语法篇推荐)
Jun 24 Javascript
XMLHttpRequest Level 2 使用指南
Aug 26 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
Oct 28 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
Dec 18 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
浅谈微信小程序之官方UI框架we-ui使用教程
Aug 20 Javascript
js实现删除li标签一行内容
Apr 16 Javascript
Vue解析带html标签的字符串为dom的实例
Nov 13 Javascript
更改BootStrap popover的默认样式及popover简单用法
Sep 13 #Javascript
JSONP原理及应用实例详解
Sep 13 #Javascript
解决angularJS中input标签的ng-change事件无效问题
Sep 13 #Javascript
javascript将非数值转换为数值
Sep 13 #Javascript
解决angularjs WdatePicker ng-model的问题
Sep 13 #Javascript
webpack实现一个行内样式px转vw的loader示例
Sep 13 #Javascript
vue项目开发中setTimeout等定时器的管理问题
Sep 13 #Javascript
You might like
珊瑚虫IP库浅析
2007/02/15 PHP
关于shopex同步ucenter的redirect问题,导致script不运行
2013/04/10 PHP
php的命名空间与自动加载实现方法
2019/08/25 PHP
extjs grid取到数据而不显示的解决
2008/12/29 Javascript
jQuery 学习第七课 扩展jQuery的功能 插件开发
2010/05/17 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
2011/03/25 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
2011/10/12 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
2012/06/20 Javascript
Javascript图像处理—亮度对比度应用案例
2013/01/03 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
使用jQuery操作HTML的table表格的实例解析
2016/03/13 Javascript
Bootstrap中的Panel和Table全面解析
2016/06/13 Javascript
总结JavaScript的正则与其他语言的不同之处
2016/08/25 Javascript
AngularJS全局scope与Isolate scope通信用法示例
2016/11/22 Javascript
数组Array的一些方法(总结)
2017/02/17 Javascript
移动端web滚动分页的实现方法
2017/05/05 Javascript
AngularJS 异步解决实现方法
2017/06/12 Javascript
关于laydate.js加载laydate.css路径错误问题解决
2017/12/27 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
2019/05/03 Javascript
vue实现评价星星功能
2020/06/30 Javascript
理解Python垃圾回收机制
2016/02/12 Python
Python爬虫使用脚本登录Github并查看信息
2018/07/16 Python
Python使用Chrome插件实现爬虫过程图解
2020/06/09 Python
利用简洁的图片预加载组件提升html5移动页面的用户体验
2016/03/11 HTML / CSS
SISLEY希思黎官方旗舰店:享誉全球的奢华植物美容品牌
2018/04/25 全球购物
Laura官网:加拿大女性的顶级时尚目的地
2019/09/20 全球购物
澳大利亚窗帘商店:Curtain Wonderland
2019/12/01 全球购物
中国梦演讲稿教师篇
2014/04/23 职场文书
艺术学院毕业生自荐信
2014/07/05 职场文书
党员个人年度总结
2015/02/14 职场文书
2015年政风行风工作总结
2015/04/21 职场文书
调任通知
2015/04/21 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
Nginx 路由转发和反向代理location配置实现
2021/11/11 Servers
如何在python中实现ECDSA你知道吗
2021/11/23 Python