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

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

赞 (0)

相关推荐

  • 利用js将ajax获取到的后台数据动态加载至网页中的方法

    动态生成二级菜单树: <script> jQuery(function($) { /********** 获取未处理报警信息总数 **************/ var result; $.ajax({ async:false, cache:false, url: "alarm_findPageAlarm.do",//访问后台接口取数据 // dataType : "json", type: 'POST', success: function(data)

  • js实现关闭网页出现是否离开提示

    js实现关闭网页出现是否离开提示

    大家是否经常遇到在关闭网页的时候,会看到一个确定是否离开当前页面的提示框?想一些在线测试系统.信息录入系统等就经常会有这一些提示,避免用户有意或者无意中关掉了页面,导致数据丢失.这里面的实现过程很简单,利用了HTML DOM事件中的onunload和onbeforeunload方法. unload 事件属性 定义:当用户卸载文档时执行一段 JavaScript,例如: // body<body onunload="goodbye()"> //windowwindow.onb

  • VueJs单页应用实现微信网页授权及微信分享功能示例

    VueJs单页应用实现微信网页授权及微信分享功能示例

    在实际开发中,无论是做PC端.WebApp端还是微信公众号等类型的项目的时候,或多或少都会涉及到微信相关的开发,最近公司项目要求实现微信网页授权,并获取微信用户基本信息的功能及微信分享的功能,现在总算完成了,但开发过程中遇到好几个坑.废话不多说了,开始正题. 描述点 微信相关开发知识了解 怎么样实现微信相关功能本地测试 微信网页授权 微信分享 微信相关开发知识了解 微信公众号的appId,AppSecret 当我们注册一个微信公众号后,便能够得到一个appId(每个微信公众号只有一个,一个微信公

  • javascript实现简单的可随机变色网页计算器示例

    javascript实现简单的可随机变色网页计算器示例

    本文实例讲述了javascript实现简单的可随机变色网页计算器.分享给大家供大家参考,具体如下: 该程序能实现简单的加.减.乘.除.求余,页面还添加了随机变换颜色的功能. 运行效果图如下: 完整实例代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> Day 2 </TITLE> <META

  • 原生JS实现网页手机音乐播放器 歌词同步播放的示例

    整了一下  之前写了好几次每一次都丢三落四的 今天花了半天理了下思路 整理了下头绪 //获取歌词文本 var txt = document.getElementById("lrc"); var lrc = txt.value;//获取文本域里的值 /*console.log(lrc);*/ var lrcArr = lrc.split("[");//去除[ /*console.log(lrcArr);*/ var html = "";//定义一个

  • JS脚本实现网页自动秒杀点击

    JS脚本实现网页自动秒杀点击

    我们先来看下秒杀活动页面代码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title> Micomo </title> </head> <body> <div> <p> 活动倒计时<str

  • Javascript网页抢红包外挂实现分享

    一开始用Firefox加Firebug/YSlow插件分析,但是firefox不能运行自定义的javascript,好像还要装什么插件.于是转用chrome,发现chrome还是不错的,直接写个javascript就可以当作插件安装了. 中间淘宝还改过几次脚本,当然每次都是大同小异.佩服下苦逼的淘宝程序员,周末还要加班改脚本. 附录是我写的一个版本的脚本,直接调用 Volcano.BrickRate=1.0; Volcano.Brick.getLottery(KISSY); KISSY是一个类似

  • javascript网页随机点名实现过程解析

    javascript网页随机点名实现过程解析

    主要知识点涉及if选择结构判断语句.数组的定义.定时器.清除定时器.日期对象的使用. 1.HTML结构 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>随机点名</title> <style type="text/css"> .box{ width: 200px; height: 200px; border: 1

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

    首先定义好样式,利用v-for中的index值,然后绑定样式来实现隔行变色效果. 以下为完整代码,很简单,但也是个技巧. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&

  • vue.js在标签属性中插入变量参数的方法

    html的标签的属性,比如id.class.href需要动态传递参数,拼接字符串,查了一些资料,并没有找到合适的解决方法,琢磨了一上午,终于试出了方法: v-bind:属性=" '字符串'+自定义变量名",自己试了没问题,有需要的朋友可以借鉴下! 最后需要注意一下属性一定是":属性="这种形式才会起作用 <ul class="menu" v-for="(item,index) in 4"> <li :clas

  • 解决vue.js在编写过程中出现空格不规范报错的问题

    解决vue.js在编写过程中出现空格不规范报错的问题

    找到build文件夹下面的webpack.base.conf.js文件. 然后打开该文件,找到图下这段代码,把他注释掉. 注释掉之后,再进行子页面等编写的时候,空格不规范的情况下也不会再报错啦.因为这个报错对于初学者来说实在头大.哈哈O(∩_∩)O哈哈~ 我标注的这些地方,原本是有严格的空格规范要求的,这些报错真是另人烦躁呀o(╥﹏╥)o 反正我把这个问题解决了,特别开心哒哒哒~~~ 以上这篇解决vue.js在编写过程中出现空格不规范报错的问题就是小编分享给大家的全部内容了,希望能给大家一个参考

  • Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题

    Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题

    Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下面给大家介绍Vue.js表单标签中的单选按钮.复选按钮和下拉列表的取值问题. 摘要: 表单标签取值问题中,单选按钮.复选按钮和下拉列表都比较特殊.这里总结一下vue.js中关于单选按钮.复选按钮和下拉列表不同情况的取值特殊性问题. 表单标签取值问题中,单选按钮.复选按钮和下拉列表都比较特殊.这里总结一下vue.js中关于单选按钮.复选按钮和下拉列表不同情况的取值特殊性问题. 一.单选按钮 单选按钮:单选按钮用

  • JS动态遍历json中所有键值对的方法(不知道属性名的情况)

    本文实例讲述了JS动态遍历json中所有键值对的方法.分享给大家供大家参考,具体如下: JavaScript中使用ajax技术访问后台资源的时候,常常使用json作为轻量级数据传输格式.json类似于Java中的HashMap,是由一系列的key-value键值对构成. 如果后台返回给前台的json中key的值是动态生成的,那么我们没有办法使用常规的object.name或object["name"]的方式来获取json中的值. 这个时候我们需要在不知道属性名称的时候,遍历json对象

  • vue.js利用defineProperty实现数据的双向绑定

    vue.js利用defineProperty实现数据的双向绑定

    vue.js如何实现数据的双向绑定呢? 与angular不同. vue利用的是es5的defineproperty特性. 1.一个小例子 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <input type="tex

  • vue.js利用Object.defineProperty实现双向绑定

    Object.defineProperty这个方法了不起啊,vue.js是通过它实现双向绑定的..而且Object.observe也被草案发起人撤回了..所以defineProperty更有必要了解一下了. 几行代码看他怎么用 var a= {} Object.defineProperty(a,"b",{ value:123 }) console.log(a.b);//123 很简单,它接受三个参数,而且都是必填的.. 传入参数 第一个参数:目标对象 第二个参数:需要定义的属性或方法的

  • Vue 子组件更新props中的属性值问题

    Vue 子组件更新props中的属性值问题

    目录 Vue子组件更新props的属性值 .sync属性 v-model应用 Vue子组件中修改Props的几种情况 针对以上几种情况再逐一进行分析 结果展示 结论 Vue子组件更新props的属性值 在子组件中更新props中的属性值,并且更新到父组件,有两种实现方式:.sync 和 自定义v-model .sync属性 父组件在给子组件传值时,属性名后需要加修饰符.sync,格式 :子组件props属性名.sync 父组件 <template> <div id="app&q

  • vue.js的vue-cli脚手架中使用百度地图API的实例

    vue.js的vue-cli脚手架中使用百度地图API的实例

    第一步,去百度地图开发者申请密钥. 1.申请密钥(百度地图开放平台-->开发文档-->web开发-->JavaScript  API-->立即使用-->创建应用) 2.密钥申请成功后 第二步,在项目的需要模板中引入,具体如下: 项目路径 其中index.html存放地图链接,代码如下 在百度地图开放平台 服务介绍中 选择我们所需要的地图类型  demo演示可查看 选择我们所需哪种百度地图的类型:http://lbsyun.baidu.com/index.php?title=j

  • vue.js中v-on:textInput无法执行事件问题的解决过程

    vue.js中v-on:textInput无法执行事件问题的解决过程

    前言 最近在学习vue.js框架,学习过程中遇到一些问题,所以记下其中遇到问题的解决过程,避免以后再遇到同样的问题,分享出来也方便遇到这个问题的朋友参考,下面话不多说了,来一起看看详细的介绍: 先来看这段示例代码 <div id="wrap"> <input type="text" v-on:textInput="fn"> </div> <script type="text/javascript

随机推荐