知识 | vue常用指令

参考地址：https://zhuanlan.zhihu.com/hacker-cafe
作者：留白

v-on 缩写

...

...

v-bind缩写

...

...

v-text

直接把文字绑定到html；
如果数据是纯字符串也可以使用；
绑定其它类型的数据，它们会以字符串的形式输出；

    

        

        
{{info}}
    
    
    

v-text

v-html

相当于JQuery的html方法，把数据中的html字符串嵌入到目标元素。

 

        
Hello World
        

    

    
    

image.png

v-if/v-else-if/v-else

在html中进行状态控制的快捷指令；
使用这三个指令时，vue只会生成判定为true的那个节点；
示例：假设status可能会返回'loading'，'ready'，'fail'三者之一，页面根据这个字段显示不同内容；

  

       
 
          
Loading
       
       
 
          
Ready
       
       
 
          
Fail
       
    
    
    

image.png

image.png

image.png

image.png

v-show

根据布尔值决定目标元素的css display值；
showHeader可以赋值为其他东西，但是最后都会转换为布尔值来决定目标元素是否显示；

 

        
{{info}}
    
    
    

image.png

image.png

image.png

v-show —— 只改变元素的class
v-if —— 会决定是否生成这个dom节点

v-once

只根据数据渲染一次，往后改变数据，目标元素不再重新渲染；
示例：用v-text和v-once进行对比

        
v-once:{{once}}
 
        

    

    
    

image.png

image.png