Vue学习笔记3.8 列表渲染 v-for

基本的v-for使用方式:




	列表渲染
	


	
{{item}} ------ {{index}}

要注意的是 不能通过下标直接为列表添加数据

Vue学习笔记3.8 列表渲染 v-for_第1张图片

需要用特定函数进行修改:pop(), push(), shift() unshift() splice() sort() reverse()

不过可以先用下标添加。然后最后一个用push追加下就行了

或者用一个新的列表替代掉(就是给list赋一个新的列表 = =)

2. 一般做列表会带上key来区分每个列表循环的值。 Vue不介意用数据本身的下标(index)来做。而是用后台返回来的id值做下标:


	
{{item.text}}

3.也可以迭代对象:


	
{{item}}-----{{key}}-----{{index}}

这里要注意 不能直接添加对象的键值 只能通过重新指向1个新的对象才可

Vue学习笔记3.8 列表渲染 v-for_第2张图片

正确的如下:

Vue学习笔记3.8 列表渲染 v-for_第3张图片

你可能感兴趣的:(Vue.js)