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>`

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。