1. 程式人生 > >Vue.js 的一個小技巧---利用v-for中的index值,來實現隔行變色

Vue.js 的一個小技巧---利用v-for中的index值,來實現隔行變色

type 樣式 lin class idt title mes har oct

  首先定義好樣式,利用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值,來實現隔行變色