Vue 模板逻辑(条件与循环)

前面的话

上一篇文章介绍了Vue.js的基本的模板语法，除了模板语法，还有逻辑语句：条件与循环。这篇文章将介绍Vue.js的条件与循环语句。

●条件语句

js中的条件语句 if、else、else if，在Vue.js中有类似的指令：v-if、v-else、v-else-if。

[v-if]

v-if指令： 根据表达式的值渲染DOM元素，如果表达式的值是true,那么将元素插入DOM中，否则将从DOM中移除。

 

        
我是一个p标签
        

上面代码中，如果"seen"的值为true，则"#app"元素显示，否则将从DOM中移除.
如果想切换多个元素，可以把一个元素当做包装元素，并在上面使用v-if。最终的渲染结果不会包含元素.

[v-else]

可以用 v-else 指令给 v-if 添加一个 “else” 块：

实例：随机生成一个数字，判断是否大于0.5,输出对应的信息

        

            Sorry
        
        

            Not sorry
        

[v-else-if]

用作v-if里的一个else-if块

实例：
下面代码中，当type='A’时，显示内容为A的div；当type='B’时，显示内容为B的div；当type='C’时，显示内容为C的div；否则，显示内容为“NOT A/B/C”的div

 

        

            A
        
        

            B
        
        

            C
        
        

            NOT A/B/C
        
  

注意： v-else、v-else-if必须跟在v-if或者v-else-if之后

●元素不复用

Vue会尽可能高效的渲染元素，通常会复用已有元素而不是从头开始渲染。
这么做，除了是Vue变得非常快之外，还有一些有用的的好处。

例如：如果用户在不同的登录方式之间切换

 

        
        
         

             切换登录方式
         

[key属性]

Vue提供了一种方式来声明这两个元素是完全独立的—不要复用它们 。需要添加一个具有唯一值的key属性即可。

        
        
        

            切换登录方式
        
 
 

现在，每一次切换，输入框将被重新渲染

注意：元素任然会被高效地复用，因为它们没有添加key属性

●元素显隐

[v-show]

v-show: 根据表达式的真假值，切换元素的display属性。当v-show被赋值为true时，元素显示；否则，元素被隐藏。

使用v-show来根据条件展示元素，与v-if的用法类似：区别
在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。
v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。

相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。
一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。
因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

 

        
我是一个p标签
 

    

●循环语句

循环使用v-for指令

[v-for迭代数组]

v-for指令die迭代数组需要以site in sites形式的特殊语法，sites是源数据数组并且site是数组元素迭代的别名.

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

 
    

        

            

                {{site.name}}
            
        
    
    
    

第二参数 为index索引

  

        

            

                {{index}} {{site.name}}
            
        
    
     

data属性里面有一个sites数组

[v-for迭代对象]

语法：
v-for="(value, key, index) in object"

        

            

                {{value}}
            
        

    

data属性里面有一个object对象

第二个参数为键名：

   

        

            

                {{key}} : {{value}}
            
        
    
    

第三个参数为索引：

  

        

            

            {{index}}. {{key}} : {{value}}
            
        

    

[v-for迭代整数]

        

            

                {{n}}
            
        
 
    

[注意]：整数迭代是从1开始，而不是从0开始的

参考：
1：Vue菜鸟教程
2：http://www.cnblogs.com/xiaohuochai/p/7294339.html#anchor1