列表渲染

首先输出一个数组列表看看：

这个数组循环其实就是列表渲染

------------------------------------------------------------------------------------------

一般来说为了提高循环显示的性能，都会给每一个循环项上加一个唯一的key值

是可以显示的，但是不推荐使用这种方法，因为使用index作为key值，在你频繁操作dom元素相对应数据的时候，还是比较废性能，可能会让vue无法充分的复用dom节点

那我们使用什么作为key值呢，一般来说，当后端向前端返回数据的时候，这个list并不是前端写死的一个数组

后端返回数据的时候，一般会携带一个和数据或者和数据库相关的一个唯一数据条目标识符

所以我们使用数据的id来当做key值，由于数据的id是唯一的，又不是数组的下标，那么就能保证key值上来说性能最高

那么，我们现在在忘list里添加内容

那么我们现在通过数组下标的形式来添加数据并且改变页面内容

发现数据加入进去了，但是页面并没有发生改变

所以对于vue来说，我们只能通过vue提供的几个数组变异方法来操作数组，才能改变页面效果

在vue中一共提供了7种数组变异方法来供我们操作数组，

pop push shift unshift splice sort reverse

比如：我们现在想要将中间的Dell改成Dell1

那么可以用如下的方法：

数组类型在JS里面是引用值，那么我们还可以改变数组引用，从而更改界面效果

---------------------------------------------------------------

vue里面template标签的作用

我现在想要循环显示两个标签div和span

那么两次循环肯定是不行的

现在改成下面这种：

然后发现有3个外层div，那么我现在不想要这个div怎么办呢？

就可以使用template模板占位符标签，他可以在循环中包裹我们想要显示的元素，但是在渲染过程中并不会被渲染出来

外层的三个div标签就没了

-----------------------------------------------------------------------------------------

对象循环

那么，我们现在想要改变ReSword

我们现在想要往里面多加一项

发现并没有什么改变

但是实际上，我们的数据里面已经有address了

那么我们就想忘里面添加内容，我们可以直接改变整个对象的引用

这样就可以了

那么这样改变岂不是很麻烦？

还有其他方法：

Vue.set() 方法，它既是Vue上的全局方法，也是Vue上的实例方法

所以直接在实例上使用set方法也可以

那么现在再来改变数组

总结一下：

我们现在想要改变数组，然后页面也跟着变一共有三种方法，

第一种：直接改变数组的引用，

第二种：通过变异方法（pop，push等）

第三种：Vue的set方法

对于对象来说一共有两种方法

第一种：直接改变对象的引用

第二种：Vue的set方法