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

以上是 Vue.js 利用v-for中的index值实现隔行变色 的全部内容, 来源链接: utcz.com/z/344539.html

回到顶部