Vue.js 利用v-for中的index值實現隔行變色

來源：懂視網責編：小采時間：2020-11-27 22:10:56

Vue.js 利用v-for中的index值實現隔行變色

Vue.js 利用v-for中的index值實現隔行變色:首先定義好樣式，利用v-for中的index值，然后綁定樣式來實現隔行變色效果。以下為完整代碼，很簡單，但也是個技巧。 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <m

推薦度：

點擊下載本文 文檔為doc格式

導讀Vue.js 利用v-for中的index值實現隔行變色:首先定義好樣式，利用v-for中的index值，然后綁定樣式來實現隔行變色效果。以下為完整代碼，很簡單，但也是個技巧。 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <m

首先定義好樣式，利用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值實現隔行變色，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

Vue.js 利用v-for中的index值實現隔行變色

推薦度：

點擊下載本文 文檔為doc格式

標簽： VUE index vue.js

熱門焦點

Vue.js 利用v-for中的index值實現隔行變色

Vue.js 利用v-for中的index值實現隔行變色

Vue.js 利用v-for中的index值實現隔行變色

最新推薦

猜你喜歡

熱門推薦