map实现购物车选中功能

简介: map实现购物车选中功能

map()

  1. map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
  2. map() 方法按照原始数组元素顺序依次处理元素。
  3. 注意: map() 不会对空数组进行检测。
  4. 注意: map() 不会改变原始数组。

this.$set()

受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter,所以属性必须在 data 对象上才能让 Vue.js 转换它,才能让它是响应的。要处理这种情况,我们可以使用$set()方法,既可以新增属性,又可以触发视图更新。

这两者可以配合使用,在购物车中实现是否选中功能。

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
                    });
            },

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


目录
打赏
0
0
0
0
8
分享
相关文章
项目资源太紧张了,如何根据map信息进行功能裁剪和优化?
项目资源太紧张了,如何根据map信息进行功能裁剪和优化?
102 1
微信小程序学习实录5(H5嵌入小程序、map组件、地图调起功能、腾讯百度高德导航页、返回web-view页)
微信小程序学习实录5(H5嵌入小程序、map组件、地图调起功能、腾讯百度高德导航页、返回web-view页)
645 0
Charles的Map Local功能
Charles的Map Local功能,需要不断修改接口返回的信息来测试各种case(各种客户端、前端样式测试用得较多)
394 0
Charles的Map Local功能
PIE-engine 教程 ——云计算当中的map()映射函数功能介绍
PIE-engine 教程 ——云计算当中的map()映射函数功能介绍
233 0
PIE-engine 教程 ——云计算当中的map()映射函数功能介绍
Java中Map集合概述特点、基本功能、获取功能及Map集合的两种遍历方式
Map集合概述特点、基本功能、获取功能及Map集合的两种遍历方式的简单示例
185 0
Spring注解的(List&Map)特殊注入功能
Spring注解的(List&Map)特殊注入功能
217 0
js模仿java的Map集合,实现功能
<p style=""><span style="">java.util 中的集合类包含 Java 中某些最常用的类。最常用的集合类是 List 和 Map。List 的具体实现包括 ArrayList 和 Vector,它们是可变大小的列表,比较适合构建、存储和操作任何类型对象元素列表。List 适用于按数值索引访问元素的情形。</span></p> <p style=""><span
1809 0
ES6的Set和Map你都知道吗?一文了解集合和字典在前端中的应用
该文章详细介绍了ES6中Set和Map数据结构的特性和使用方法,并探讨了它们在前端开发中的具体应用,包括如何利用这些数据结构来解决常见的编程问题。
ES6的Set和Map你都知道吗?一文了解集合和字典在前端中的应用
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等