小例~vue商品筛选

知识点

1.如果没有定义某个属性,那么就不能检测属性的变化,需要使用set设置对象的属性
.Vue.set( target, key, value )//构造函数的静态方法
.vm.$set( target, key, value )//实例上的方法
.设置对象不能是 Vue 实例,或者 Vue 实例的根数据对象

.虽然不可以定义某个属性,但是可以改写整个对象,如果原有对象有属性,可通过...或object.assign()解决
小例~vue商品筛选_第1张图片

2.对象的key值唯一
3.删除,确保删除能触发更新视图,原生的监测不到
.vue.delete target, key )//构造函数的静态方法
.vm.$delete( target, key )//实例上的方法


功能

1.四行,每行单选
选择时,给当前行的父级绑定一个index属性,当选择的元素下表与父级index相同,高亮

小例~vue商品筛选_第2张图片小例~vue商品筛选_第3张图片


2.添加筛选条件,计划好对象,这样排列有序,只需要修改对应键名的键值小例~vue商品筛选_第4张图片

3.删除筛选条件。.对象key值唯一,通过key删除筛选条件小例~vue商品筛选_第5张图片


思考

1.添加筛选条件时,把selectArr计划成数组,发现每选一项会增加一项且无序,改为对象
2.删除筛选时,传入的selindex参数,发现删除第一项后,对象0:()消失,此时对象key与selindex错位,删除出错



你可能感兴趣的:(vue相关)