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 文档的编码问题解决
Mar 01 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
Sep 08 Javascript
关于javascript中的typeof和instanceof介绍
Dec 04 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
Mar 04 Javascript
Javascript高级技巧分享
Feb 25 Javascript
jQuery根据元素值删除数组元素的方法
Jun 24 Javascript
jQuery自定义动画函数实例详解(附demo源码)
Dec 10 Javascript
jQuery实现ToolTip元素定位显示功能示例
Nov 23 Javascript
ReactNative中使用Redux架构总结
Dec 15 Javascript
vue项目环境变量配置的实现方法
Oct 12 Javascript
Postman的下载及安装教程详解
Oct 16 Javascript
vue-router传递参数的几种方式实例详解
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
让CodeIgniter的ellipsize()支持中文截断的方法
2014/06/12 PHP
smarty模板引擎中内建函数if、elseif和else的使用方法
2015/01/22 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
驱动事件的addEvent.js代码
2007/03/27 Javascript
jq选项卡鼠标延迟的插件实例
2013/05/13 Javascript
jQuery 追加元素的方法如append、prepend、before
2014/01/16 Javascript
JS烟花背景效果实现方法
2015/03/03 Javascript
Bootstarp风格的toggle效果分享
2016/02/23 Javascript
javascript随机抽取0-100之间不重复的10个数
2016/02/25 Javascript
bootstrap flask登录页面编写实例
2016/11/01 Javascript
微信小程序实战之运维小项目
2017/01/17 Javascript
Javascript 链式作用域详细介绍
2017/02/23 Javascript
微信小程序 出现47001 data format error原因解决办法
2017/03/10 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
2017/06/12 jQuery
JS数组实现分类统计实例代码
2018/09/30 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
Vue.extend 编程式插入组件的实现
2019/11/18 Javascript
小程序实现按下录音松开识别语音
2019/11/22 Javascript
Vue学习笔记之计算属性与侦听器用法
2019/12/07 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
2020/07/30 Javascript
详细解析Python中的变量的数据类型
2015/05/13 Python
在Ubuntu系统下安装使用Python的GUI工具wxPython
2016/02/18 Python
利用PyInstaller将python程序.py转为.exe的方法详解
2017/05/03 Python
Python网络编程使用select实现socket全双工异步通信功能示例
2018/04/09 Python
Python supervisor强大的进程管理工具的使用
2019/04/24 Python
Python 调用 Outlook 发送邮件过程解析
2019/08/08 Python
pycharm软件实现设置自动保存操作
2020/06/08 Python
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
美国最大最全的亚洲购物网站:美国亚米网(Yamibuy)
2020/05/05 全球购物
咖啡厅创业计划书范本
2014/01/22 职场文书
中餐厅主管的职责范文
2014/02/04 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript
Win11如何修改dns?Win11修改dns图文教程
2022/01/18 数码科技
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript