vue-列表渲染(v-for 详细)
v-for
1、数组
使用v-for指令根据数据源来渲染列表。
v-for指令采用 item in items 这种特殊的语法结构。
为了便于Vue能够追踪每个条目的身份信息，并实现现有元素的重用与重新排序，请确保每个条目必须赋予唯一的key属性。
运行效果：
动态改变数组的值，触发视图更新：
vm.newsList[0].title = "会渲染到视图中";使用索引来实现对数组内数据的动态修改，并将其展示在视图中。然而目前使用的索引0正是该数组原本就具有的位置编号。如果我们试图修改原本不存在的位置5会遇到困难。
vm.newsList[5] = {
title:'可以添加但是不会渲染到视图中',
new:true,
id:5
};由于JavaScript的限制,Vue受JavaScript的限制,无法检测不可变数组: 1.在赋值时使用具体的索引位置,例如在赋值时使用具体的索引位置,例如vm.items[indexOfItem] = newValue; 2.在调整大小时,例如vm.items.length = newLength;
那怎么能够监听到 数组 更改并能触发视图的更新呢：
1、用“变更方法”
vm.newsList.push({
title:'可以添加并会渲染到视图中',
new:true,
id:6
})
采用替换数组的方法，则会导致原有数据结构被修改。值得注意的是，在某些情况下可能会采取非替换方式的操作手段来进行数据处理。例如filter()、**concat()和slice()**等函数就属于这类操作方式。这些函数不会修改原有的数据结构而是创建一个新的数据副本，并将这个新副本的内容与原有对象脱节开。即通过这种方式会直接更改原有的数据引用关系而不是仅仅改变指针指向的关系链。
vm.newsList = [{
title:'可以改变并会渲染到视图中',
new:true,
id:9}]3、Vue.set，是全局vue的一个set方法：
Vue.set(vm.newsList, 7, {title:'可以添加页会渲染到视图中',
new:true,
id:7})也可以使用vm.$set实例方法，该方法时全局方法Vue.set的一个别名：
vm.$set(vm.newsList, 8, {title:'可以添加页会渲染到视图中',
new:false,
id:8})2、对象
也可以用 v-for 来遍历一个对象（对象是个键值对）
还可以用第三个参数作为索引：
运行效果：
更改对象的值，触发视图更新
改变对象中固有的值，会渲染到视图
vm.userInfo.age = 12;如果试图新增一个对象，则无法更新视图（因为该对象存在于系统中，并未被渲染至视图层）
vm.userInfo.sex = 'girl';注意 由于JavaScript的限制，Vue 不能检测对象属性的添加或删除：
那怎么能够监听到 对象 的更改并能触发视图的更新呢：
1、同数组，给对象一个新的引用的指向，视图可以更新：
vm.userInfo = {sex:'girl'}2、可以通过Vue.set(object,key,value)：
Vue.set(vm.userInfo, 'age' ,16);上使用v-for
若要使用v-for来进行循环渲染一段包含多个元素的内容，则需将其包裹起来。（还是以最上边数组为例）
渲染为：
