首先定義好樣式，利用v-for中的index值，然后綁定樣式來實(shí)現(xiàn)隔行變色效果。
以下為完整代碼，很簡(jiǎn)單，但也是個(gè)技巧。
<!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值，綁定樣式來實(shí)現(xiàn)隔行變色效果--> <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>總結(jié)
以上所述是小編給大家介紹的Vue.js 利用v-for中的index值實(shí)現(xiàn)隔行變色，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
