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

作者:我们家的小常客 时间:2024-04-16 09:35:40 

首先定义好样式,利用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值实现隔行变色网站的支持!

来源:https://www.cnblogs.com/mycognos/archive/2018/07/31/9398360.html

标签:vue.js,v-for,index,变色
0
投稿

猜你喜欢

  • Flask框架实现的前端RSA加密与后端Python解密功能详解

    2021-07-26 16:28:13
  • 使用微信助手搭建微信返利机器人流程

    2022-10-10 08:34:03
  • Mysql 删除重复数据保留一条有效数据(最新推荐)

    2024-01-20 17:08:11
  • bootstrap选项卡使用方法解析

    2024-04-16 09:13:11
  • python 解决动态的定义变量名,并给其赋值的方法(大数据处理)

    2021-10-09 10:44:58
  • 安装多个版本的TensorFlow的方法步骤

    2022-12-10 00:13:02
  • python实现简单多人聊天室

    2022-08-17 15:04:13
  • Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)

    2022-05-03 10:35:40
  • python 换位密码算法的实例详解

    2021-10-07 10:25:57
  • 关于pyinstaller 打包多个py文件的问题

    2022-01-19 17:49:10
  • 详解Python的多任务进程

    2021-08-20 19:12:48
  • python2爬取百度贴吧指定关键字和图片代码实例

    2022-10-12 09:03:44
  • 避免Adodb.Stream输出UTF-8时自动写入的BOM(asp)

    2011-08-24 20:32:56
  • SQLServer2014故障转移群集的部署的图文教程

    2024-01-28 23:30:06
  • 关于Numpy数据类型对象(dtype)使用详解

    2023-10-09 02:31:24
  • go gin 正确读取http response body内容并多次使用详解

    2024-04-25 15:06:34
  • Python设计模式之单例模式实例

    2023-06-02 12:43:02
  • 详解Python pygame安装过程笔记

    2023-07-24 12:20:36
  • GO语言实现简单的目录复制功能

    2024-04-26 17:21:39
  • Vue登录拦截 登录后继续跳转指定页面的操作

    2024-05-28 15:48:14
  • asp之家 网络编程 m.aspxhome.com