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

in 网站建设
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

`

<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>`
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看