表单与v-model

v­model: 用于在表单类元素上双向绑定事件

用于input框，以及textarea

    
  // 1、使用 v-model 绑定 value
    {{ value }}
  
    // 2、使用 v-model 绑定 message
    
    {{ message }}


var app = new Vue({
  el: '#app',
  data: {
    value: 'hello',
    message: ' 你好'
  }
})

单个单选按钮 和 多个单选

    单个单选按钮：
      // 1、单个单选按钮使用 v-model 没用
    
    


    
    单个单选按钮：
      // 2、单个单选按钮应该使用 v-bind
    
    


    
    多个单选按钮：

    apple:  

    peach:  

    banana:  

    lemon:  

    你选择了 -- {{ checkFruit }}

  

var app = new Vue({
  el: '#app',
  data: {
   isChecked: true,
    checkFruit: 'peach'  // 3、checkFruit 的值应该是多个单选按钮中的 value 值，当然也可以是其他值
  }
})

• 第一个单选按钮：用的是 v-model，所以没用；
• 第二个单选按钮：用的是 v-bind，有用；
• 第三个多个单选按钮：因为 checkFruit 的值是 peach，所以默认选中 peach 。

单个复选框 和 多个复选框

    
    单个复选框（使用 v-model）：
    
    
    


    
    单个复选框（使用 v-bind）：
    
    
    


    
    多个复选框：

    apple:  

    peach:  

    banana:  

    lemon:  

    


var app = new Vue({
  el: '#app',
  data: {
    isChecked: true,
    fruitArr: ['peach']
  }
})

• 第一个单个复选框：使用 v-model，有用；
• 第二个单个复选框：使用 v-bind，有用；
• 第三个多个复选框：fruitArr 的值应该是一个数组，如果是字符串，会被自动转成布尔值。这里默认选中了 peach

单选的下拉框 和 多选的下拉框

    
    单选的下拉框：
      // v-model 应该写在 select 标签上，而不是 option 标签
      apple
      peach
      banana
      lemon
    
    你选中了 -- {{ checkFruit }}
    
    


    
    多选的下拉框：
      // 实现多选，应该写上 multiple 属性
      apple
      peach
      banana
      lemon
    
    


var app = new Vue({
  el: '#app',
  data: {
    checkFruit: 'peach',  // 单选下拉框绑定的值，可以是字符串，也可以是数组，这里也可以写成 checkFruit: ['peach']
    checkFruits: ['peach']  // 多选下拉框绑定的值，应该是数组
  }
})

• 第一个单选下拉框：每次只能选中一个，后面的文本会随之改变；
• 第二个多选下拉框：按住 Ctrl 键，可以多选，后面的数组会随之改变。
  如果是单选：初始化最好给定字符串，因为 v­-model 此时绑定的是静态字符串或者布尔值；
  如果是多选：初始化最好给定一个数组。