1. 程式人生 > 實用技巧 >使用Vue對列表選中項標色

使用Vue對列表選中項標色

今天學習Vue的時候,要做一個作業,就是給一個數組,遍歷陣列顯示出來,並對選中的項標色。大概如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .selectClass {
            color: red
        }
    </style>
</head>
<body>
    <!-- #Vue物件 -->
    <div id="app" v-cloak>
        <ul>
<!--v-bind:class="{selectClass:index==selectIndex}"的邏輯是,如果選中的index和我們通過方法傳遞過去賦值之後的selectindex一樣,就為true,不一樣就為false--!> <li v-for="(m,index) in movies" v-on:click="liClick(index)" v-bind:class="{selectClass:index==selectIndex}">{{m}}</li> </ul> </div> <script src="../Vue/vue.js"></script> <script> //let 變數 const常量 //變成正規化:宣告式程式設計 const app = new Vue({ el: '#app',//用於掛載要管理的元素 data: { movies: ['教父', '美國往事', '肖申克的救贖', '海上鋼琴師'], selectIndex: -1 }, methods: { liClick(index) {
//將傳過來的Index賦值給我們定義的selectIndex
                    this.selectIndex = index;
                }
            }
        })

    </script>
    <!-- #endregion -->
</body>
</html>