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 相关文章推荐
jQuery模拟超链接点击效果代码
Apr 21 Javascript
JavaScript实现Java中StringBuffer的方法
Feb 09 Javascript
JS实现控制表格单元格垂直对齐的方法
Mar 30 Javascript
JavaScript中判断两个字符串是否相等的方法
Jul 07 Javascript
js实现拉幕效果的广告代码
Sep 02 Javascript
js通过指定下标或指定元素进行删除数组的实例
Jan 12 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
Apr 26 Javascript
Swiper.js实现移动端元素左右滑动
Sep 08 Javascript
微信小程序使用echarts获取数据并生成折线图
Oct 16 Javascript
vue父组件给子组件的组件传值provide inject的方法
Oct 23 Javascript
JavaScript中的函数式编程详解
Aug 22 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
Nov 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
匹配csdn用户数据库与官方用户的重合度并将重叠部分的用户筛选出来
2011/12/25 PHP
php中可能用来加密字符串的函数[base64_encode、urlencode、sha1]
2012/01/16 PHP
yii实现使用CUploadedFile上传文件的方法
2015/12/28 PHP
ext for eclipse插件安装方法
2008/04/27 Javascript
jQuery contains过滤器实现精确匹配使用方法
2013/04/12 Javascript
JS中for循序中延迟加载动态效果的具体实现
2013/08/18 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
2013/12/02 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
2016/06/23 Javascript
自定义require函数让浏览器按需加载Js文件
2016/11/24 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
2017/04/03 jQuery
JavaScript运动框架 多值运动(四)
2017/05/18 Javascript
深入理解Angular4订阅(Subscribe)与取消
2017/11/22 Javascript
深入浅析Vue.js计算属性和侦听器
2018/05/05 Javascript
Layui实现带查询条件的分页
2019/07/27 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
2020/03/23 Javascript
javascript实现前端分页功能
2020/11/26 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
2020/12/07 Vue.js
vue实现树状表格效果
2020/12/29 Vue.js
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
Ubuntu下安装PyV8
2016/03/13 Python
Python爬取成语接龙类网站
2018/10/19 Python
python爬取cnvd漏洞库信息的实例
2019/02/14 Python
2019 Python最新面试题及答案16道题
2019/04/11 Python
python celery分布式任务队列的使用详解
2019/07/08 Python
python利用dlib获取人脸的68个landmark
2019/11/27 Python
解决Tensorboard可视化错误:不显示数据 No scalar data was found
2020/02/15 Python
python 爬虫请求模块requests详解
2020/12/04 Python
Opencv+Python识别PCB板图片的步骤
2021/01/07 Python
牵手50新加坡:专为黄金岁月的单身人士而设的交友网站
2020/08/16 全球购物
电子银行营销方案
2014/02/22 职场文书
公司应聘自荐书
2014/06/14 职场文书
保留意见审计报告
2015/06/05 职场文书
个人工作总结(管理人员)范文
2019/08/13 职场文书
解决Goland 同一个package中函数互相调用的问题
2021/05/06 Golang
Go语言基础切片的创建及初始化示例详解
2021/11/17 Golang
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技