Vue入门（三）——条件渲染与列表渲染

vue.png

一、条件渲染

有时候，我们要根据数据的情况，决定标签是否进行显示，或者是否有其他动作。最常见的就是在表格渲染的时候，如果表格没有数据，就显示无数据；如果有数据，就显示表格数据。

为了让我们更方便地完成判断，Vue帮我们提供了一个v-if指令。

举个例子：

  
Yes
  
No
  

除此之外，Vue中还提供了一个与v-if类似的指令v-show。它们的功能大体相似，唯一的区别在于：带有v-show的元素始终会被渲染并保留在DOM中。所以，引用Vue文档上的话来说，就是：

v-if 有更高的切换开销，而 v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if较好。

此外，还需要被注意的一点是：v-else元素必须紧跟v-if或v-else-if元素的后面，否则不会被识别。

二、列表渲染

1.基本v-for循环渲染标签

模板引擎都会提供循环的支持，Vue也不例外。Vue提供了一个v-for指令，基本用法类似于foreach的用法。

上个例子你就看懂了。

  

    

      

        
姓名
        
年龄
        
地址
      
    
    
 
      
      

        
{{ item.name }}
        
{{ item.age }}
        
{{ item.address }}
      
    
  

其中item代表数组中的每一项，这个名字可以随便起；而userList就是你要遍历的数组。是不是很简单？

2、Template循环渲染多标签

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

此时，Vue给我们提供了