vue学习笔记之：单选框、复选框、下拉列表框的数据绑定操作

vue的一个很重要的特性就是数据绑定，而核心的指令就是：v-model

使用的话分为如下步骤：

  第一步：data属性中定义好绑定的值的变量

  第二步：标签上通过v-model绑定好该变量

  第三步：无论上通过插值表达式{{}}的方式还是在代码里通过this.的方式，都是可以获取到变化后的值的

简单的实例如下：

    
    
    



    
多行文本输入内容：
    
{{message}}
    

单选框的操作

    
    
    



    
    选择A
    
    选择B
    

    
您选择的是：{{checkVal}}

注意：v-model此时绑定的其实是单选框的value对应的值

复选框的操作：

    
    
    



    
    A
    
    B
    
    C
    

    您选择的是：{{pickValues}}
    

    

下拉框 

    
    
    



    
        请选择
        A
        B
        C
    
    
您选择的是：{{selectedVal}}

 

单选框、复选框和下拉框绑定的都是根据对应的标签中的value字段对应的值