使用Vue對列表選中項標色
阿新 • • 發佈:2020-07-09
今天學習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>