03-Vue入门系列之Vue列表渲染及条件渲染实战

有时候我们要根据数据的情况，决定标签是否进行显示或者有其他动作。最常见的就是，表格渲染的时候，如果表格没有数据，就显示无数据。如果有数据就显示表格数据。 Vue帮我们提供了一个<code>v-if</code>的指令，帮助我们完成判断的模板处理。

<code>v-if</code>指令可以根据数据绑定的情况进行插入标签或者移除标签。 当然，如果熟悉js的都清楚，有if，肯定会有else。 Vue提供的是 <code>v-else</code>指令。

模板引擎都会提供循环的支持。Vue也不例外，Vue是提供了一个<code>v-for</code>指令。基本的用法类似于foreach的用法。还是看例子最直接，上代码：

上面的例子，我们演示的是 每次循环输出一个tr标签。如果我们希望每次循环生成两个tr标签呢？如果还有生成其他的标签呢？

Vue给我们提供了template标签，供我们用于v-for循环中进行处理。

上代码喽：

由于Vue的机制就是检测数据的变化，自动跟新HTML。数组的变化，Vue之检测部分函数，检测的函数执行时才会触发视图更新。这些方法如下：

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

下面是一个综合的案例，每秒钟往表格中添加一条数据。 本案例综合使用了v-if 和 v-for循环综合案例。

列表的使用其实本质还是js的衍生使用，对于有js开发基础的没有什么难度。关键是多写几个案例就会详细通了。