Vue基本指令：v-on,v-if,v-mode

目录

Vue基本指令

1、v-text指令：设置标签的文本值

2、v-html指令：设置标签的innerHTML

3、v-on指令：为元素绑定事件

4、v-on:传参

5、v-show指令：根据真假切换元素的显示状态

6、v-if指令：根据表达式的真假切换元素的显示状态

7、v-bind：为元素绑定属性

8、v-for指令：根据数据生成列表结构

9、v-mode：便捷的设置和获取表单元素的值

---

Vue基本指令

1、v-text指令：设置标签的文本值

默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容

v-text与{{}}的区别

使用v-text，标签内在加内容显示不出来

这里的内容不显示

在{{}}后面添加别的内容可以显示

{{ message + '!'}}这里的内容显示

示例：

    
    
    
    


    

       
不显示
        
不显示
        
{{ message + '!'}}显示
    
    

    

2、v-html指令：设置标签的innerHTML

v-text：指令无论内容为什么都显示的是文本内容

v-html：指令有html结构会被解析为标签

3、v-on指令：为元素绑定事件

事件写在：methods中，事件名不用写on

语法：v-on：事件 = 绑定的事件名称

简写方法：@事件 = 绑定的事件名称

示例：

    
    
    
    


    

        
        
        
        
点击：{{food}}
    
    
    

4、v-on:传参

事件绑定的方法写成函数调用的形式，可以传入自定义参数

定义方法时需要定义形参来接收传入的实参

事件的后面跟上.修饰符可以对事件进行限制

.enter可以限制触发的按键为回车

示例：
 

练习：计数器

    
    
    
    


    

        

             - 
             {{num}} 
             + 
        
    
    
    

5、v-show指令：根据真假切换元素的显示状态

原理是修改元素的display,实现显示隐藏，指令后面的内容,最终都会解析为布尔值，值为true元素

显示,值为false元素隐藏

示例：

6、v-if指令：根据表达式的真假切换元素的显示状态

本质是通过操纵dom元素来切换显示状态

表达式的值为true,元素存在于dom树中,为false,从dom树中移除

示例：

    
    
    
    


    
    

        
        
张三
        
张三-20
        
热死了
    
    
    

7、v-bind：为元素绑定属性

完整写法是v-bind:属性名

简写的话可以直接省略v-bind，只保留:属性名

8、v-for指令：根据数据生成列表结构

数组经常和v-for结合使用

语法是：( item,index ) in 数据

item和index可以结合其他指令一起使用

数组长度的更新会同步到页面上,是响应式的

示例：

    
    
    
    


    

        
        
        

            

                {{index + 1}} 兴趣：{{item}}
            
        
        

            {{item.name}}
        

    

    

    

9、v-mode：便捷的设置和获取表单元素的值

绑定的数据会和表单元素值相关联

示例：

    
    
    
    


    

        
        
        
{{message}}