vue 自学笔记(5) 列表渲染

列表渲染

　　　　一:v-for 指令

　　　　当我们涉及到列表渲染数据的时候，不可能做一个重复的工作去不停的一个一个的渲染每一项列表。并且列表数据的表现，比如从后端请求过来的数据，不可能是一个一个的单独的 JSON 数据，通常会是一个数组或者对象。

　　　　针对这样的情景，Vue 提供了 v-for 指令使列表使我们可以根据一组数组的选项列表进行渲染。并且，我们只需要写一个列表元素作为模板就可以通过遍历属性的方式渲染出大量的列表内容。

　　　　

　　　　　　当然，除了列表，也可以通过v-for重复渲染其他元素，这里我们使用v-for重复渲染 div，v-for="(item, index) of list"是一个固定的语法，参数第一项为遍历 list 属性的每一项，参数第二项为遍历 list 时的索引。

　　　　除了item of items这种写法，使用item in items也是可以的。(items 是源数据数组并且 item 是数组元素迭代的别名)。

　　　

　　　

 

　　注意:!!

　　　　　　

 

 　　　　　　二:对vue 数组数据的修改

　　　　现在页面有 5 个数据，我们在控制台 vm.list[5] = '123'，添加一条数据，发现 vm.list 虽然多了一条数据，但页面没有响应式的变化