Vue.js指令小練習001 列表點選變色
阿新 • • 發佈：2018-11-01
需求：
分析：
給li繫結一個背景色樣式，當你點選這個li的時候，這個li背景色的樣式生效，其他的li背景色樣式不生效
程式碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="vue.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> .red{ background-color: red; } </style> </head> <body> <div id="div"> <ul> <li v-for = '(v,k) in arr' @click="fn(k)" v-bind:class="{red:v.bol}">點選的那個才變紅</li> </ul> </div> </body> </html> <script type="text/javascript"> var vm = new Vue({ el: '#div', data:{ //來5條資料 arr: [ {bol:false}, {bol:false}, {bol:false}, {bol:false}, {bol:false}] }, methods:{ fn: function (k) { // 通過i知道當前被點的資料是誰， // 把被點選的資料的 bol值改成true其他的都改成false for (var i = 0; i < this.arr.length; i++){ this.arr[i].bol = false; } this.arr[k].bol = true; } } }) </script>