Vue中的列表渲染v-for：对数组和对象做循环，以及vue中的set方法

一、将数组内容循环展示到页面上

item是数组的值/内容

data中的list有三个值，把这三个值循环到页面上——vue中的列表渲染，对list做循环，列表中的每一项都放到item中，所以页面上打印出item即可，{{item}}（一般来说list是后端返给前端的一个值，会携带数据库或者id）

为了提升循环显示的性能，我们会给每个循环项加一个唯一的key值，尽量不要使用index作为key值

当我们想动态地(让页面有响应)给list里面添加内容时:(类似于todolist)1、要用数组变异方法   2、改变数据的引用地址 3、set方法

在控制台输入：用的是vm~

1、改变数组数据要用数组变异方法（七个），比如vm.list.push({id:"02",text:"2"})，而利用数组下标改变是无用的，页面不会有响应，比如vm.list[4]={id:"02",text:"2"}；七个数组变异方法：push,pop,shift,sort,unshift,reserve,splice

2、改变数据的引用，数组在js中是引用型数据

 

当要循环两组数据时，需要用template来包裹这两个div标签，并且template并不会被渲染到页面上：

3、set方法可以直接操作数组的每一项

Vue.set(数组，索引，新值)

vm.$set(数组，索引，新值)

修改后：

 

二、将对象的内容循环展示到页面上

item指的就是对象的值

动态地改变：vm.userInfo.name="Dell lee",这时，页面会跟着改变

如果想要网里面加一项呢，不能直接vm.userInfo.address="123",页面不会跟着改变；

方法一：与数组类似，直接改变引用：

方法二：

1、用vue.set（对象，"键名"，“键值"）方法改变对象的内容

结果为：

2、vm时vue的实例，那它会有实例的方法set：vm.$set(对象，”键名“，”键值“)