小例~vue商品筛选

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wangjiaohome/article/details/79698716

知识点

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

.虽然不可以定义某个属性,但是可以改写整个对象,如果原有对象有属性,可通过...或object.assign()解决

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


功能

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


2.添加筛选条件,计划好对象,这样排列有序,只需要修改对应键名的键值

3.删除筛选条件。.对象key值唯一,通过key删除筛选条件


思考

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



展开阅读全文

没有更多推荐了,返回首页