案例 -- 用computed做多選 · Vue&&TypeSprict--基礎總結

>[success] # computed ~~~ 1.對計算屬性操作，只給計算屬性一個函數，默認這個函數是在取值的時候觸發的,這個函數是get函數 2.設置值set(){}，取值get(){} 3.當checkedbox 是input的一個type類型，也就是說當作為計算屬性，點擊的時候，其實觸發的是他的set方法又因為，計算屬性默認是get方法，所以就需要去定義它的set。 ~~~ >[danger] ##### 案例 ~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body, ul, li { margin: 0; padding: 0; list-style: none; } .list-body li:nth-child(even) { background: yellow; } .list-body li:nth-child(odd) { background: #fff; } .list-body li:hover { background: green; } .list-body li.checkedColor { background: green; } </style> <script src="../src/vue.js"></script> <script> let data = [ { id:Date.now()+Math.random(), name: '鄧紫棋', song: '泡沫', checked: true, album: 10 }, { id:Date.now()+Math.random(), name: '王杰', song: '泡沫', checked: true, album: 10 }, { id:Date.now()+Math.random(), name: '鄧紫棋', song: '泡沫123', checked: false, album: 10 } ] </script> </head> <body> <div class="wrap" id="app"> <div class="baidu"> <ul class="list list-head"> <li> <div> <input type="checkbox" v-model='isCheckedAll' />全選 </div> <span>歌單</span> <span>歌手</span> <span>專輯</span> </li> </ul> <ul class="list list-body"> <li v-for="item in songList" > <div> <input v-model="item.checked" type="checkbox"> </div> <span>{{item.song}}</span> <span>{{item.name}}</span> <span>{{item.album}}</span> </li> </ul> <div class="select"> <span class="selectAll"> <span>統計：</span> </span> </div> </div> {{isCheckedAll}} </div> <script> new Vue({ el: '#app', data: { songList: data }, computed: { /* 對計算屬性操作只給計算屬性一個函數，默認這個函數是在取值的時候觸發的,這個函數是get函數設置值 set(){} 取值 get(){} */ isCheckedAll:{ get(){ console.log('取值'); return this.songList.every(function(item){ return item.checked }); }, set(newValue){ console.log('設置值了'); console.log(newValue); this.songList.forEach(item => item.checked = newValue) } } } }) </script> </body> </html> ~~~