【Vue3】Vue内置指令

注意：在vue中使用v-开头的都是Vue指令。

一、v-html插入标签

可以识别标签。

    
    
    
    
    



    

        
        
{{ msg }}
        

    
    

二、v-text插入文本

不能识别标签。

三、条件渲染

渲染：就是将模型中的数据显示到视图中；

条件渲染：就是根据表达式的值来决定是显示还是隐藏内容。

1. • v-if指令

如果flag为true，就显示标签；如果flag为假，就隐藏标签。

    
    
    
    
    


    

        
        
西安交通大学
    
    

2. v-show指令

如果ok为true，就显示标签；如果ok为假，就隐藏标签。

    
    
    
    
    
    


    
    

        
        

            

                
西安
                
北京
                
上海
            
        
    
    

3. v-if和v-show的区别

实现方式不同：v-if底层采用DOM的appendChild方法创建元素添加到页面中；v-show是通过CSS的display属性来控制是否显示元素。

加载性能：v-if快，v-show慢。

切换开销：v-if的开销大,v-show的开销小。

四、v-for循环渲染

将数组或集合中的数据渲染到视图中。

    
    
    
    
    


    

        
        

            

                
                

                    {{ item }}
                
            
            

            

                

                    {{ pro }}
                
            
            

            

                

                    {{ item.key }}
                    {{ item.name }}
                    {{ item.loc }}
                
            
            

                

                    {{key}}:{{item}}:{{index}} //属性名、值、索引
                
            
        
    
    

五、v-bind

将页面元素的属性和模型中变量进行绑定。

1. • 绑定链接

    
    
    
    
    


    

        
        百度一下
    
    

2. 绑定样式

    
    
    
    
    



    

        
        
早睡早起
    
    

六、v-on

给元素绑定事件

1. • 绑定一个事件

注意：v-on绑定事件，若使用v-on绑定单个事件可以简写为：@事件名

    
    
    
    
    


    

        
        确定
        
        
    

    

2. 绑定多个事件

七、v-model

将input的值和模型中的变量进行绑定，实现数据与视图的双向绑定。

    
    
    
    
    


    

        
请选择你的性别：
        

            男
            女
        
        


        
你的性别是：{{ gender }}
        
毕业院校：
        

            
                请选择
                西安邮电大学
                陕西师范大学
                西安科技大学
            
        
        
你的学校是：{{ school }}
    
    

八、v-once

可以让元素或组件只渲染一次，一旦绑定，数据就不会改变。

    
    
    
    
    



    
    

        
v-once
        
        
        
        
{{voncetext}}
        
        
{{voncetext}}
    

    

九、v-pre

用于跳过这个元素和它的子元素的编译过程。对于大量没有指令的节点使用v-pre指令可以加快编译速度。

    
    
    
    
    



    
    

        
{{ message }}
        

    

十、v-cloak

vue.js文件没有加载完成时，在页面上上会出现 ‘{{message}}’的字样，等到vue创建实例、编译模板时，DOM就会被替换掉，过程中屏幕上会出现闪动一下。v-cloak指令可以解决初始化慢而导致页面闪动的问题。

    
    
    
    
    






    
{{message}}