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 相关文章推荐
js 鼠标点击事件及其它捕获
Jun 04 Javascript
jquery ajax局部加载方法详解(实现代码)
May 12 Javascript
Vue.js中extend选项和delimiters选项的比较
Jul 17 Javascript
Vue自定义事件(详解)
Aug 19 Javascript
React中上传图片到七牛的示例代码
Oct 10 Javascript
vue项目引入字体.ttf的方法
Sep 28 Javascript
PostgreSQL Node.js实现函数计算方法示例
Feb 12 Javascript
ES6模板字符串和标签模板的应用实例分析
Jun 25 Javascript
layui2.0使用table+laypage实现真分页
Jul 27 Javascript
layui数据表格跨行自动合并的例子
Sep 02 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
Feb 11 Javascript
Js on及addEventListener原理用法区别解析
Jul 11 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
PHP 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
利用PHP生成静态HTML文档的原理
2012/10/29 PHP
PHP7安装Redis扩展教程【Linux与Windows平台】
2016/09/30 PHP
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
XAMPP升级PHP版本实现步骤解析
2020/09/04 PHP
动态调用css文件——jquery的应用
2007/02/20 Javascript
js获取php变量的实现代码
2013/08/10 Javascript
ie9 提示'console' 未定义问题的解决方法
2014/03/20 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
2014/06/30 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
2014/07/27 Javascript
JavaScript中指定函数名称的相关方法
2015/06/04 Javascript
require.js的用法详解
2015/10/20 Javascript
理解javascript闭包
2015/12/15 Javascript
javascript 判断当前浏览器版本并判断ie版本
2017/02/17 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
2018/04/12 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
2018/08/30 Javascript
详解在vue-test-utils中mock全局对象
2018/11/07 Javascript
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
[01:07:47]Secret vs Optic Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
python计算最小优先级队列代码分享
2013/12/18 Python
python中的字典详细介绍
2014/09/18 Python
Python中对元组和列表按条件进行排序的方法示例
2015/11/10 Python
python cx_Oracle的基础使用方法(连接和增删改查)
2017/11/19 Python
Python温度转换实例分析
2018/01/17 Python
分析python动态规划的递归、非递归实现
2018/03/04 Python
Django之模板层的实现代码
2019/09/09 Python
CSS3解析抖音LOGO制作的方法步骤
2019/04/11 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
2020/12/16 HTML / CSS
地球上最先进的胡子和头发修剪器:Bevel
2018/01/23 全球购物
我读书我快乐演讲稿
2014/05/07 职场文书
婚礼秀策划方案
2014/05/19 职场文书
2015年高三班主任工作总结
2015/05/21 职场文书
优化经济发展环境工作总结
2015/08/11 职场文书
月考总结与反思
2015/10/22 职场文书
PHP对接阿里云虚拟号的实现(号码隐私保护)
2021/04/06 PHP
Nginx利用Logrotate实现日志分割
2022/05/20 Servers