直播app源码，map实现购物车选中功能

直播app源码，map实现购物车选中功能

HTML代码：

 

 //购物车列表选中
<checkbox v-bind:checked="item.isSelect" @click="item.isSelect=!item.isSelect"></checkbox>
 
 
 
//底部全选
<checkbox-group>
    <checkbox @click="selectProduct(isSelectAll)" v-bind:checked="isSelectAll" />全选
 </checkbox-group>

​

JS代码：

 

        //赋值给数组
        方法名() {
                var _this = this
                axios.get('接口地址', {参数}).then(function (res) {
                    _this.list = res.data
                    /*赋值，是否选中*/
                    _this.list.map(function (item) {
                        _this.$set(item, 'isSelect', true);
                    })
                }).catch(function (err) {
                    console.log(err)
                })
            },
 
            selectProduct(_isSelect) {
                //遍历List，全部取反
                for (var i = 0, len = this.list.length; i < len; i++) {
                    this.list[i].isSelect = !_isSelect;
                }
            },

 

vue中computed函数：

 

 isSelectAll() {
                //如果List中每一条数据的isSelect都为true，返回true，否则返回false;
                return this.list.every(
                    function (val) {
                        return val.isSelect
                    });
            },

 

这样就实现了购物车的商品选中功能。

以上就是直播app源码，map实现购物车选中功能， 更多内容欢迎关注之后的文章