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 相关文章推荐
jquery入门—数据删除与隔行变色以及图片预览
Jan 07 Javascript
如何将一个String和多个String值进行比较思路分析
Apr 22 Javascript
js获取GridView中行数据的两种方法 分享
Jul 13 Javascript
JQuery实现table行折叠效果以JSON做数据源
May 26 Javascript
一段非常简单的js判断浏览器的内核
Aug 17 Javascript
JavaScript中提前声明变量或函数例子
Nov 12 Javascript
jQuery中ajax的load()与post()方法实例详解
Jan 05 Javascript
深入浅析JavaScript中的作用域和上下文
Mar 26 Javascript
JavaScript Date 知识浅析
Jan 29 Javascript
对vue里函数的调用顺序介绍
Mar 17 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
May 02 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
Sep 25 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 preg_replace替换实例讲解
2013/11/04 PHP
CodeIgniter框架基本增删改查操作示例
2017/03/23 PHP
PHP如何根据文件头检测文件类型实例代码
2018/10/14 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
2020/07/08 PHP
将字符串转换成gb2312或者utf-8编码的参数(js版)
2013/04/10 Javascript
js中的cookie的读写操作示例详解
2014/04/17 Javascript
jQuery搜索同辈元素方法
2015/02/10 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
2015/10/20 Javascript
jQuery打字效果实现方法(附demo源码下载)
2015/12/18 Javascript
基本DOM节点操作
2017/01/17 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
2017/07/10 Javascript
Vue2.0权限树组件实现代码
2017/08/29 Javascript
微信小程序用户自定义模版用法实例分析
2017/11/28 Javascript
vue2.0 computed 计算list循环后累加值的实例
2018/03/07 Javascript
js中的this的指向问题详解
2019/08/29 Javascript
微信小程序swiper实现文字纵向轮播提示效果
2020/01/21 Javascript
vue 动态组件用法示例小结
2020/03/06 Javascript
完美解决通过IP地址访问VUE项目的问题
2020/07/18 Javascript
Vue 组件注册全解析
2020/12/17 Vue.js
Python字符遍历的艺术
2008/09/06 Python
Python爬虫常用库的安装及其环境配置
2018/09/19 Python
Python 通过requests实现腾讯新闻抓取爬虫的方法
2019/02/22 Python
PIL图像处理模块paste方法简单使用详解
2019/07/17 Python
pyqt5 QScrollArea设置在自定义侧(任何位置)
2019/09/25 Python
Python 读取xml数据,cv2裁剪图片实例
2020/03/10 Python
利用4行Python代码监测每一行程序的运行时间和空间消耗
2020/04/22 Python
Weblogic的布署方式
2013/08/23 面试题
工业学校毕业生自荐信范文
2014/01/03 职场文书
高中军训感言500字
2014/02/24 职场文书
商务日语专业自荐信
2014/04/17 职场文书
党委班子剖析材料
2014/08/21 职场文书
2016优秀大学生个人事迹材料范文
2016/03/01 职场文书
如何写一份具有法律效力的借款协议书?
2019/07/02 职场文书
用Python简陋模拟n阶魔方
2021/04/17 Python
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP
Python中生成随机数据安全性、多功能性、用途和速度方面进行比较
2022/04/14 Python