Vue.js 利用v-for中的index值实现隔行变色


Posted in Javascript onAugust 01, 2018

首先定义好样式,利用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值实现隔行变色,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
一段实时更新的时间代码
Jul 07 Javascript
js word表格动态添加代码
Jun 07 Javascript
采用call方式实现js继承
May 20 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
May 23 Javascript
Angularjs 实现一个幻灯片示例代码
Sep 08 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
Mar 26 Javascript
CodeMirror js代码加亮使用总结
Mar 25 Javascript
微信小程序之GET请求的实例详解
Sep 29 Javascript
微信小程序wepy框架学习和使用心得详解
May 24 Javascript
Vue学习笔记之计算属性与侦听器用法
Dec 07 Javascript
Vue实现星级评价效果实例详解
Dec 30 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
Jun 11 Javascript
echarts设置图例颜色和地图底色的方法实例
Aug 01 #Javascript
看看“疫苗查询”小程序有温度的代码
Jul 31 #Javascript
Vue父子组件双向绑定传值的实现方法
Jul 31 #Javascript
react中实现搜索结果中关键词高亮显示
Jul 31 #Javascript
vue2.0页面前进刷新回退不刷新的实现方法
Jul 31 #Javascript
Node.js log4js日志管理详解
Jul 31 #Javascript
jQuery 实现倒计时天,时,分,秒功能
Jul 31 #jQuery
You might like
php session劫持和防范的方法
2013/11/12 PHP
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
php版微信公众平台接口参数调试实现判断用户行为的方法
2016/09/23 PHP
PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)
2017/05/26 PHP
PHP实现登录注册之BootStrap表单功能
2017/09/03 PHP
JQuery文本框高亮显示插件代码
2011/04/02 Javascript
js+JQuery返回顶部功能如何实现
2012/12/03 Javascript
js图片实时加载提供网页打开速度
2014/09/11 Javascript
JavaScript中对象介绍
2014/12/31 Javascript
javascript原型链继承用法实例分析
2015/01/28 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
2016/05/27 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
2016/06/06 Javascript
Bootstrap Search Suggest使用例子
2016/12/21 Javascript
图片文字识别(OCR)插件Ocrad.js教程
2018/11/26 Javascript
vue项目首屏加载时间优化实战
2019/04/23 Javascript
一文读懂ES7中的javascript修饰器
2019/05/06 Javascript
vuex中store存储store.commit和store.dispatch的用法
2020/07/24 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
2020/11/09 Javascript
[59:36]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第二场
2018/04/04 DOTA
Python复制目录结构脚本代码分享
2015/03/06 Python
Python使用poplib模块和smtplib模块收发电子邮件的教程
2016/07/02 Python
Python实现备份MySQL数据库的方法示例
2018/01/11 Python
浅谈Django学习migrate和makemigrations的差别
2018/01/18 Python
浅谈Python中的全局锁(GIL)问题
2019/01/11 Python
对python列表里的字典元素去重方法详解
2019/01/21 Python
Django实现发送邮件功能
2019/07/18 Python
django数据关系一对多、多对多模型、自关联的建立
2019/07/24 Python
快速解决jupyter启动卡死的问题
2020/04/10 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
鲜为人知的HTML5语音合成功能
2019/05/17 HTML / CSS
英国评分最高的女性剃须刀订阅盒:FFS Beauty
2018/01/25 全球购物
12岁生日感言
2014/01/21 职场文书
教师师德师风自我剖析材料
2014/09/29 职场文书
优秀党支部申报材料
2014/12/24 职场文书
JS中如何优雅的使用async await详解
2021/10/05 Javascript
Pygame Event事件模块的详细示例
2021/11/17 Python