VUE常见指令

VUE常见指令

通常指令（Directives）是指带有v-属性的特殊属性。在Vue给HTML元素增加了自定义属性你，它们都是以"v-"开头了

指令

v-text： 更新元素的textContent，如果要更新部分的textContent，需要使用{{}}

插值

v-html：更新元素的innerHTML

v-show：根据表达式的真假切换元素的display css属性

v-if：根据表达式的真假条件渲染元素

v-else：与编程语言中的else一样

v-else-if：与编程语言中的else-if一样

v-for： 可循环数组，对象，字符串，数字

v-on：绑定事件监听器。事件类型由参数决定

v-bind：动态的绑定一个或多个属性，或者一个组件prop到表达式

v-model：表单元素或者组件上创建双向绑定

v-pre：跳过这个元素和他子元素的编译过程。可以用来显示原始Mustache标签。跳过大量没有指令的节点会加快编译

v-cloak：这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

v-once:只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

    
        
        
    
    
          
        

            
            
            
            {{msg}}
            
            

            
            
我是可以看见的div，使用v-show
            
            

                大于0.5
            
            

               小于0.5
            
            循环数组：
            

                
{{item}}
            
            循环数组：
            

                
{{index}}:{{item}}
            
            循环对象：
            

                
{{key}}:{{val}}
            
            循环对象：
            

                
{{index}}:{{key}}:{{val}}
            
            循环字符串：
            

                
{{index}}:{{val}}
            
            循环数字：
            

                
{{index}}:{{val}}
            
            
            
            
            您在文本框中输入的内容是：{{inputtxt}}
            {{ msg }}
            

              {{ msg }}
            
            This will never change: {{msg}}
        
    

转载于:https://www.cnblogs.com/baiyang2292/p/11314828.html