Vue.js：条件与循环

条件语句

条件渲染指令： 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指令需要以site in sites形式的特殊语法，sites是源数据数组，site是数组元素迭代的别名。

v-for可以绑定数据到数组来渲染一个列表：

    

       

          {{book.name}}
      
    

条件与循环结合的例子

    
    
    
    
    
    



    
    

        
显示电影信息
        

            
            

                
{{moive.name}}
                
                
                
                
喜欢
                
不喜欢