Vue常用指令(一)

1、v-once

      只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。

代码：

    
原始值: {{msg}}
    
后面的: {{msg}}
    

2、v-if

根据表达式的值的真假条件渲染元素。当v-if为真时，会显示元素。

图示：

代码：

    
显示出来!
    
    
不显示出来!
  
    
小明的身高:{{height}}
   

3、v-show

根据表达式之真假值，切换元素的 display CSS 属性。

v-show和v-if的区别：

       v-if 是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件； v-show 则只是简单地基于 CSS 切换。

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

图示：

4、v-else

限制：前一兄弟元素必须有 v-if 或 v-else-if

图示：

代码：

    

        {{num}},大于0.5
    
    

        {{num}},小于0.5
    

5、v-else-if

限制：前一兄弟元素必须有 v-if 或 v-else-if。

图示：

代码：

    
输入的成绩对应的等级:
    
    

        
优秀
        
良好
        
及格
        
不及格