3 条件与循环

条件渲染指令： v-if、v-else-if、v-else：可以根据表达式的值在DOM中渲染或销毁元素/组件,与v-show不同的是，v-if是真正的条件渲染，适合条件不经常变更的场景；而v-show只是简单的CSS属性切换，使用于频繁切换条件。

v-if举例：

    
当status为1时显示该行
    
当status为2时显示该行
    
否则显示该行

v-show举例：

    
当status为1时显示该行

列表渲染指令：v-for：当需要将一个数组遍历或枚举一个对象循环显示时，会用到列表渲染指令v-for，结合in来使用

举例：

    

       

          {{book.name}}
      
    

条件与循环结合的一个综合例子：

    
        
        
        
        
    
    
        

            
显示书籍信息
            

                

                    
{{book.name}}
                    
                    
                    
喜欢
                    
不喜欢
                
            
        
        
    

运行结果