vue纯计算属性实现全选反选--超简单

时间 2020-03-20
标签 vue 计算属性实现全选简单繁體版
原文原文链接
`javascript
<body>
    <div class="app">
        <p>全选 <input type="checkbox" v-model="allCheck" /></p>
        <ul>
            <li v-for="(item,index) in list">
                <input type="checkbox" v-model="item.checked"/>
                <span>{{item.name}}</span>
                <span>{{item.song}}</span>
            </li>
        </ul>
        <div>
            <p>总共选中{{filterAll}}位歌手</p>
            <p>专辑又{{count}}张</p>
        </div>
        
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
    <script type="text/javascript">
            new Vue({
                el:'.app',
                data:{
                    list:[{name:'张杰',song:'你好明天',checked:false,num:5,},{name:'邓紫棋',song:'碰见',checked:false,num:20,},{name:'alin',song:'LOVE',checked:false,num:15,}]
                },
                computed:{  //计算属性默认为get,设置为对象的时候有get()和set()
                    allCheck:{
                        get(){
                            //取值
                            //every方法,数组中每一项都知足一个条件返回true
                            return this.list.every(item=>item.checked)
                        },
                        set(newValue){
                            //设置值
                            console.log('触发set方法')
                            this.list.map(item=>item.checked = newValue)
                        }
                    },
                    filterAll(){
                        return this.list.filter(item=>item.checked).length
                    },
                    count(){
                        let checkedList = this.list.filter(item=>item.checked)
                        return checkedList.reduce((total,item)=>{
                            return total+item.num
                        },0)
                    }
                }
            })
    </script>
    
   </body>`