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

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

HTML代码：

 

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

​

JS代码：

 

1

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

 

vue中computed函数：

 

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

 

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

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