webveuje/vue/表单输入绑定v-model.md

# 表单输入绑定 v-model

### 基本用法

用v-model 指令在表单input, textarea, select 元素上创建双向绑定值

v-model 使用时，会忽略所有表单元素的value, checked, selected 属性设置的初始值，表单元素的初始值由v-model的初始值决定



v-model为不同的输入元素使用不同的property并抛出不同的事件

- text 和 textarea 元素使用 `value` property 和 `input` 事件；
- checkbox 和 radio 使用 `checked` property 和 `change` 事件；
- select 字段将 `value` 作为 prop 并将 `change` 作为事件。

### v-model 使用

语法：v-model="data中的属性"

示例：

- 文本

  ```
  <input v-model="message" placeholder="edit me">
  <p>Message is: {{ message }}</p>
  ```

  

- 多行文本

  ```
  <span>Multiline message is:</span>
  <p style="white-space: pre-line;">{{ message }}</p>
  <br>
  <textarea v-model="message" placeholder="add multiple lines"></textarea>
  ```

  

- 复选框

  - 单个复选框

  ```
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
  ```

  ![image-20201222175835286](表单输入绑定v-model.assets/image-20201222175835286.png)未选中

  

  ​	![image-20201222175902811](表单输入绑定v-model.assets/image-20201222175902811.png)    已选中

  

  - 多个复选框  绑定到同一个数组

    ```
    <input type="checkbox" id="jack" value="Jackval" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="Johnval" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mikeval" v-model="checkedNames">
    <label for="mike">Mike</label>
    <br>
    <span>Checked names: {{ checkedNames }}</span>
    ```

    ```
    new Vue({
      el: '...',
      data: {
        checkedNames: []
      }
    })
    ```

    未选择时：![image-20201222180149362](表单输入绑定v-model.assets/image-20201222180149362.png)

    选中时：![image-20201222180209565](表单输入绑定v-model.assets/image-20201222180209565.png)

    > 注 选中的时候v-modal对应的是input元素的value 属性

- 单选按钮

  ```
  <div id="example-4">
    <input type="radio" id="one" value="Oneval" v-model="picked">
    <label for="one">One</label>
    <br>
    <input type="radio" id="two" value="Twoval" v-model="picked">
    <label for="two">Two</label>
    <br>
    <span>Picked: {{ picked }}</span>
  </div>
  ```

  ```
  new Vue({
    el: '#example-4',
    data: {
      picked: ''
    }
  })
  ```

  未选时：![image-20201222180600963](表单输入绑定v-model.assets/image-20201222180600963.png)

  选择后：

  ![image-20201222180642082](表单输入绑定v-model.assets/image-20201222180642082.png)

  > 注 选中的时候v-modal对应的是input元素的value 属性

- 选择框

  - 单选：

  ```
  <div id="example-5">
    <select v-model="selected">
      <option disabled value="">请选择</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    <span>Selected: {{ selected }}</span>
  </div>
  ```

  ```
  new Vue({
    el: '...',
    data: {
      selected: ''
    }
  })
  ```

  

  未选择：![image-20201222180952802](表单输入绑定v-model.assets/image-20201222180952802.png)

  选择后：![image-20201222181015791](表单输入绑定v-model.assets/image-20201222181015791.png)

  > 注 选中的时候v-modal对应的是option元素的value属性

  - 多选

    ```
    <div id="example-6">
                <select v-model="selected"  multiple="multiple"  style="width: 50px;">
                  <option>A</option>
                  <option>B</option>
                  <option>C</option>
                  <option>D</option>
                  <option>E</option>
                  <option>F</option>
                </select>
                <br>
            <span>Selected: {{ selected }}</span>
              </div>
    ```
    
    ```
    new Vue({
      el: '#example-6',
      data: {
        selected: []
 }
    })
    ```
    
    选择前：![image-20201223141638119](表单输入绑定v-model.assets/image-20201223141638119.png)
    
    选择后：![image-20201223141710470](表单输入绑定v-model.assets/image-20201223141710470.png)

​              使用时需要按ctrl选中多个