二、Vue指令

一、文本指令

1. v-text

    不能解析html语法的文本，会原样实处。

2. v-html

    不能解析html语法的文本。

3. v-once

    处理的标签的内容只能被解析一次。

    
{{ msg }}

二、事件指令

1. 语法
        
    v-on:事件名=‘方法变量’
       
    @事件名=‘方法变量’


2. 同一标签绑定多个事件

    鼠标事件示例

    
    

        
{{ action }}
    
    
    
    
    


3. 给绑定事件传参

    a. 不加括号默认传事件对象：$event
    
    b. 加括号表示自己传参，系统不自动传事件对象，可以手动传入事件。

        
{{ action }}

三、属性指令

1. 语法
        
    v-bind:属性名=‘变量’
       
    ：属性名=‘变量’



2. class属性绑定方法


    a. 变量的值就是类名
        
        

    
    b. 多类名可以用[ ],采用多个变量来控制
    
        

    
    c. 选择器可设置为常量
    
        

        
    d. {类名：布尔值}控制某类名是否起作用
    
        

        
        
        
    
    
    

    
        

        

        

        

    
    
    
    
    
    
    
4. style属性绑定方式1

    
    

    
        
样式属性
    
    
    
    
    
    
    
    
5. style属性绑定方式2

    
    
    

    
        
样式属性
    
    
    
    
    
    

四、表单指令

1. 语法
        
    v-model=‘变量’


2. 特点

    a. v-model可实现数据的双向绑定，v-model绑定的变量值可以影响表单标签的值，
    反过来单标签的值也可以影响变量的值。
    
    b. 在选择框中，v-model能确定选择的初始值。
    
    
3. v-model关联input框

    
    

    
        
        
        {{ v1 }}
    
    
    
    
    
    
    
    

4. 在单选框中的应用（value）
    
    
    

        

        男：
        女：
        {{ v1 }}
        

        
    
    
    
    
    
    


5. 在单一复选框中的应用（布尔值）

    
    

        

            卖身契：同意 
            

            提交
        
    
    
    
    
    
    

6. 在多复选框中的应用（数组）

    
    

        

            性别：

            男：
            女：
            其他：
            {{ v1 }}
        
    
    
    
    
    

五、条件指令

1. 语法
        
    a. v-show=‘布尔变量’
    
    b. v-if=‘布尔变量’ 
    
    
2. 特点

    a. 用v-show隐藏时，采用display：none进行渲染。
    
    b. 用v-if隐藏时，不在页面中渲染。


3. 修改v-if参数调整显示的内容

    
        
        
        
    
    
    

    
        

            

            

            

        
    
    
    
    
    
    
    
    
    
4. 用button按钮选择颜色

    
        
        
        
    
    
    
        

            
            

                

                    红
                    蓝
                    绿
                
                

                

                

            
        
    
    
    
    

六、循环指令

1. 语法
        
    v-for='ele in string|array|obj'
    
    
2. 遍历字符串、数组及对象

    
    

        {{ i }}: {{ c }}
 
        

        
{{ e }}
        

        
{{ v }}
        

        
{{ i }}-{{ k }}: {{ v }}
        

    
    
    
    
    
    



3. for循环嵌套

    
    

        

             | {{ k }}:{{ v }}