Vue.js 利用v-for中的index值实现隔行变色
作者：我们家的小常客 发布时间：2024-04-16 09:35:40
标签：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值实现隔行变色网站的支持！
来源：https://www.cnblogs.com/mycognos/archive/2018/07/31/9398360.html
0
投稿猜你喜欢
什么是LSTM1、LSTM的结构我们可以看出，在n时刻，LSTM的输入有三个：当前时刻网络的输入值Xt；上一时刻LSTM的输出值ht-1；上- 1、PHP中的抽象类PHP 5 支持抽象类和抽象方法。定义为抽象的类不能被实例化。任何一个类，如果它里面至少有一个方法是被声明为抽象的，那么
- 任何一个交互过程的操作，对于用户来说都有学习成本，谁也不能保证所有人都可以准确无误地走完一个流程。交互设计师在设计时应该考虑适时地给用户相应
- 不加(0)的用法:set rs=conn.execute(sql)'将这个结果赋给rs这时要读取这个记录集第一个字段的数据就用rs(
- 1.开发jQuery 插件的基本格式 (function ($) { $.extend($.fn, { }) })(jQuery) 2.开发
- Mysql数据库备份和还原常用的命令是进行Mysql数据库备份和还原的关键，没有命令，什么都无从做起，更谈不上什么备份还原，只有给系统这个命
- 1 文件'''文件存储文件主名.扩展名'''Python中常有的数据文件类型有文本文件、二进
- 如何获取一个网站的相关信息，获取赶集网的招聘信息，本文为大家介绍利用python获取赶集网招聘信息的关键代码，供大家参考，具体内容如下imp
- 代码如下:--相信大家肯定经常会把数据导入到数据库中，但是可能会有些记录行的所有列的数据是null，这为null的数据是我们不需要 --现在
- 本文实例讲述了Python实现栈和队列的简单操作方法。分享给大家供大家参考，具体如下：先简单的了解一下数据结构里面的栈和堆：栈和队列是两种基
- django程序，需要写很多api，每个函数都需要几个装饰器，例如@csrf_exempt @require_POST
- 变量覆盖漏洞<?php$flag='xxx'; extract($_GET); if(isset($shiyan))
- Python-apply(lambda x: )使用def instant_order_deal(plat, special_product
- 前言最近使用pytorch训练模型，保存模型后再次加载使用出现了一些问题。记录一下解决方案！一、torch中模型保存和加载的方式1、模型参数
- 配置日志在Django中，可以通过logging模块来记录日志。日志记录器是将日志消息传递给日志处理器的对象。当需要记录日志时，可以使用以下
- 数据驱动数据的改变从而驱动自动化测试用例的执行，最终引起测试结果的改变。简单说就是参数化的应用。测试驱动在自动化测试中的应用场景：测试步骤的
- PyTorch 1.0 同时面向产品化 AI 和突破性研究的发展，「我们在 PyTorch1.0 发布前解决了几大问题，包括可重用、性能、编
- 简介每一门数据库语言语法都基本相似，但是对于他们各自的一些特性（函数、存储过程等）的用法就不大相同了，就好比Oracle与Mysql存储过程
- EasyUI 简介easyui是一种基于jQuery的用户界面插件集合。easyui为创建现代化，互动，JavaScript应用程序，提供必
- 一、前言前几天，在写一个与差分隐私相关的简单程序时，我发现了一些奇怪的东西：相对于其他的随机数生成函数，Python的random.rand
