Vue.js 利用v-for中的index值实现隔行变色
2018-08-01 08:34
796 查看
首先定义好样式,利用v-for中的index值,然后绑定样式来实现隔行变色效果。
以下为完整代码,很简单,但也是个技巧。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>title</title> <style> .on { background: red; border: 1px solid blue; } .off { background: yellow; border: 1px solid black; } </style> </head> <body> <div id="app"> <ul> <!--利用v-for中的index值,绑定样式来实现隔行变色效果--> <li v-for="(name,index) in names" :class="{on:index%2==0,off:index%2!=0}">{{name}}</li> </ul> </div> <script src="./vue.dev.js"></script> <script> var vm = new Vue({ el: "#app", data: { names: ['000', '111', '222', '333', '444', '555'] } }); </script> </body> </html>
总结
以上所述是小编给大家介绍的Vue.js 利用v-for中的index值实现隔行变色,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- 利用for循环实现的隔行变色
- 利用jquery一句话实现隔行变色
- vue.js 利用SocketCluster实现动态添加数据及排序
- 纯js实现隔行变色效果
- 用js实现隔行变色的效果
- js实现隔行变色操作鼠标经过效果
- Js 实现隔行换色及其鼠标划过变色
- JS与jQuery实现隔行变色的方法
- vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
- 利用jQuery实现表格的隔行变色、高亮显示
- js实现表格隔行变色,鼠标在该行放上移走的变色效果,还有全选,反选等
- js实现table列表中的隔行变色
- 利用jquery一句话实现隔行变色
- 利用vue.js实现被选中状态的改变
- JS实现隔行变色
- js实现表格隔行变色,鼠标在该行放上移走的变色效果,还有全选,反选等
- 【079】利用“剪叶子”算法实现树形结构的搜索功能,用Vue.js实现
- 利用Javascript实现隔行变色
- js实现表格隔行变色,鼠标在该行放上移走的变色效果,还有全选,反选等
- js实现隔行变色-------Day40