总结&学习(6):
1:
<Tag closable v-for="(item, index) in FilterConditionList.manyPlaceData" @on-close="removeTag(index,'manyPlaceData')">{{item}} </Tag>
<Tag closable v-for="(item, index) in FilterConditionList.hotelNameData" @on-close="removeTag(index,'hotelNameData')">{{item}} </Tag>
<Tag closable v-for="(item, index) in FilterConditionList.priceData" @on-close="removeTag(index,'priceData')">{{item}} </Tag>
<Tag closable v-for="(item, index) in FilterConditionList.supportData" @on-close="removeTag(index,'supportData')">{{item}} </Tag>
<Tag closable v-for="(item, index) in FilterConditionList.appraiseData" @on-close="removeTag(index,'appraiseData')">{{item}} </Tag>
removeTag(idx, name) {
this.FilterConditionList[name].splice(idx, 1);
},
例子中FilterConditionList是一个对象;manyPlaceData是对象中的数组,大体如下:
FilterConditionList: {
manyPlaceData:[],
}
在当多个数组被当做参数传入函数时,可以使用可以将变量写成字符串,在函数中依然可以访问。但是如果将'manyPlaceData'改为FilterConditionList.manyPlaceDatac传入字符串则会报错,splice方法会报错。
2:
- splice
常用的方式有:
-
arrayObject.splice(index,1):删除index位置的元素(在点击事件中,删除当前点击的元素) -
arrayObject.splice(index,0,XXX):在数组中的index位置,添加XX; -
arrayObject.splice(index,1,xxx):在数组中删除当前index的元素,并在该位置添加XXX元素,(在点击事件中则是:用XXX来替换所点击的元素)
3:
- 监听数组(大概)
我今天才意识到,好像操作数组和对象时,需要使用vue能监听到的方法。然而好像是由于JavaScript 的限制,有些操作数组和对象的方式, Vue是不能监听到变化。
对于数组而言,能监听到的方法有:
变异方法中:push(),pop(),shift(),unshift(),splice(),sort(),reverse()
非变异方法:filter(), concat() 和 slice();
这些都是vue可以监听到的数组方法。
变异方法会触发视图的更新,也就是说会改变被调用的原始数据,而非变异方法不会改变原始数据,但是会返回一个新的数组。可以利用新数组去替换原有的数组,vue只会重新渲染更新的元素,而不会全部重新软然渲染,所以文档中也推荐用一个含有相同元素的数组去替换原来的数组这样是非常高效的。
而vue不能监听的有:1.利用索引直接设置一个项,2. 修改数组的长度时;
而解决这两个问题,大多数好像都是利用
$set来解决:“用索引直接设置一个项”。
splice()来解决:修改数组的长度,无法被监听;
总结:操作数组时要使用vue能监听到的方法,遇到不能监听到的方法要使用$set或splice来解决,总之都要让vue能监听。