vue基礎之全選，不選
阿新 • • 發佈：2019-01-02
先上效果
<div class="main" id="app"> <table class="table table-border table-bordered table-bg table-hover"> <thead> <tr> <th width="25"><input type="checkbox" v-model="issongListAll">全選</th> <th width="75">歌單</th> <th width="120">歌手</th> <th width="80">專輯</th> </tr> </thead> <tbody> <tr v-for="item,index in songList"> <td><input type="checkbox" v-model="item.checked">{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.song}}</td> <td>{{item.album}}</td> </tr> </tbody> </table> <div> 歌手有:{{songLen}}位 專輯有：{{albumSum}}張 </div> </div> <script> let data=[ { id:Date.now()+Math.random(), name:'王傑', song:'泡沫', checked:false, album:5 }, { id:Date.now()+Math.random(), name:'王傑2', song:'泡沫22', checked:false, album:10 }, { id:Date.now()+Math.random(), name:'王傑22', song:'泡沫22', checked:false, album:10 } ] new Vue({ el:'#app', data:{ songList:data }, computed:{
issongListAll:{ //every() 只要陣列中的每一個都滿足就true,某一項不滿足就false get(){ return this.songList.every(item=>{ return item.checked }) }, set(val){ this.songList.forEach(item=>item.checked=val) } }, songLen(){ return this.songList.filter(item=>item.checked).length }, albumSum(){ return this.songList.filter(item=>item.checked).reduce((n,j)=>{ return n+j.album },0) } } }) </script> </body> </html>