vue列表渲染学习

173 阅读1分钟
1、循环数组

语法:(item,index) in items
参数:item和index
也可以使用of代替in做间隔符,更接近js迭代器语法

2、循环对象

语法:value in object
参数:value,name(键名)和index
注意:在遍历对象时,会按照Object.keys()的结果遍历,但是不能保证他的结果在不同js引擎下都一致。

3、维护状态

vue使用v-for渲染元素列表时,使用“就地更新”策略。这个默认的模式时高效的,但是它只适用于不依赖子组件状态或临时dom状态(例:表单输入值)的列表渲染输出。

为了vue能够跟踪每个节点,从而重用和重新排序现有元素,需要给每一个数据项提供一个唯一的key属性。 注意:不要使用对象或者数组等非基本数据类型,使用字符串或者数值类型的值。

4、数组更新检测

变更方法(变更原始数组):

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

替换数组(返回新数组):
filter()concat() 和 slice()

5、v-for和v-if同时使用

当他们处于同一节点,v-for的优先级高于v-if。

6、在组件上使用v-for

2.2.0+版本里,当在组件上使用v-for时,key时必须的