表单与v-model

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

用于input框，以及textarea

<div id="app">
    <input type="text" value="初始值" v-model="value">
  // 1、使用 v-model 绑定 value
    {{ value }}
  
    // 2、使用 v-model 绑定 message
    <textarea v-model="message" name="" id="" cols="30" rows="10" ></textarea>
    {{ message }}
</div>

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

单个单选按钮 和 多个单选

<div id="app">

    单个单选按钮：
    <input type="radio" name="" v-model="isChecked">  // 1、单个单选按钮使用 v-model 没用
    
    <br><br>
    
    单个单选按钮：
    <input type="radio" name="" v-bind:checked="isChecked">  // 2、单个单选按钮应该使用 v-bind
    
    <br><br>
    
    多个单选按钮：<br>
    apple: <input type="radio" name="fruits" value="apple" v-model="checkFruit"> <br>
    peach: <input type="radio" name="fruits" value="peach" v-model="checkFruit"> <br>
    banana: <input type="radio" name="fruits" value="banana" v-model="checkFruit"> <br>
    lemon: <input type="radio" name="fruits" value="lemon" v-model="checkFruit"> <br>
    你选择了 -- {{ checkFruit }}

  </div>

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

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

单个复选框 和 多个复选框

<div id="app">
    
    单个复选框（使用 v-model）：
    <input type="checkbox" name="" v-model="isChecked">
    
    <br><br>
    
    单个复选框（使用 v-bind）：
    <input type="checkbox" name="" v-bind:checked="isChecked">
    
    <br><br>
    
    多个复选框：<br>
    apple: <input type="checkbox" name="fruits" value="apple" v-model="fruitArr"> <br>
    peach: <input type="checkbox" name="fruits" value="peach" v-model="fruitArr"> <br>
    banana: <input type="checkbox" name="fruits" value="banana" v-model="fruitArr"> <br>
    lemon: <input type="checkbox" name="fruits" value="lemon" v-model="fruitArr"> <br>
    
</div>

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

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

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

<div id="app">
    
    单选的下拉框：
    <select name="" v-model="checkFruit">  // v-model 应该写在 select 标签上，而不是 option 标签
      <option value="apple">apple</option>
      <option value="peach">peach</option>
      <option value="banana">banana</option>
      <option value="lemon">lemon</option>
    </select>
    你选中了 -- {{ checkFruit }}
    
    <br><br>
    
    多选的下拉框：
    <select multiple v-model="checkFruits">  // 实现多选，应该写上 multiple 属性
      <option value="apple">apple</option>
      <option value="peach">peach</option>
      <option value="banana">banana</option>
      <option value="lemon">lemon</option>
    </select>
    
</div>

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

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