1.v-model在input的下拉框、單選按鈕、複選框中的應用
這裡有一個值繫結的問題，不管是下拉框或者單選按鈕還是複選框，我們都可以在對應的標籤內設定value。以下拉框為例，我們在中添加了vulue=“A被選”，當我們選擇第一個下拉框A的時候，在selected中的字串為‘A被選’，如果我們不在中設定value值的話那麼selected中的字串將是中的值‘A’。單選、複選框同理。
下拉框：

<!--下拉框-->
<div id="app">
  <select v-model="selected">
    <
 
option value="A被選">A</option>
    <option value="B被選">B</option>
    <option value="C被選">C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

vue:

new Vue({
    el: '#app',
    data: {
      selected: ''
 

    }
  });

效果顯示：
1.沒有選擇時

2.C選擇後

3.B被選後

2.v-model修飾符
v-model也可以和.lazy、.trim和.number這些修飾符一起使用。

<!-- 在每次 input 事件觸發後將輸入框的值與資料進行同步，新增 lazy 修飾符，從而轉變為使用 change 事件進行同步 -->
<input v-model.lazy="msg" >
<!--去除字串首尾的空格-->
<input v-model.trim="msg">
<!--將資料轉化為值型別-->
 

<input v-model.number="age" type="number">

.trim和.number的用法比較簡單，這裡就不做過多解釋。.lazy相當於一個延遲載入的過程。input v-model.lazy=“msg” 則相當將input的實時更新改為一個change事件，v-model.lazy只有當焦點移除input時才會觸發事件。下圖1位v-model效果，圖2位v-model.lazy效果。


v-model用於表單資料的雙向繫結，其實它就是一個語法糖，這個背後就做了兩個操作：
 1. v-bind繫結一個value屬性

2. v-on指令給當前元素繫結input事件

自定義元件使用v-model，應該有以下操作：

1. 接收一個value prop

2. 觸發input事件，並傳入新值

在原生表單元素中：

<input v-model="inputValue">

相當於

<input v-bind:value="inputValue" v-on:input="inputValue = $event.target.value">

在自定義元件中

<my-component v-model="inputValue"></my-component>

相當於

<my-component v-bind:value="inputValue" v-on:input="inputValue = argument[0]"></my-component>

這個時候，inputValue接受的值就是input事件的回撥函式的第一個引數，所以在自定義元件中，要實現資料繫結，還需要$emit去觸發input的事件。

this.$emit('input', value)

提示：本文僅供本人學習，不做參考，知識來源於網路上的文章，在此向各個文章的作者表示感謝！