v-model

僅用於如下控件：

• <input>
• <select>
• <textarea>
• 組件

v-model以Vue 實例的數據做爲數據來源，應當在組件的 data 選項中聲明初始值，以後經過監聽用戶的輸入事件以更新數據，並對一些極端場景進行一些特殊處理。

在表單控件上使用v-model

v-model根據不一樣的控件類型，使用不一樣的屬性做爲輸入並拋出不一樣的事件：

• text 和 textarea 元素使用 value 屬性和 input 事件；
• checkbox 和 radio ，單個選項使用checked屬性，多個選項，輸出value屬性的數組，事件使用 change 
• select 字段將 value 做爲 prop 並將 change 做爲事件。

一、text 和 textarea 元素綁定value 屬性和 input 事件：

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

監聽用戶的輸入，並將value的值給message，因此，當用戶有輸入時，p標籤裏的{{ message }}會實時顯示用戶的輸入

注意，在<textarea></textarea>中使用插值不會生效，而是給它綁定v-model，在另外的地方輸出對應的value。

二、checkbox 複選框：單個選項綁定checked屬性，多個選項綁定value屬性到一個數組，事件爲 change ：

三、radio單選按鈕：

四、select選擇框：
（1）只可單選時，綁定選項的value值

 

 

（2）可多選時，綁定value到一個數組

五、在組件上使用v-moel

組件上的 v-model 默認使用名爲 value 的 prop 和名爲 input 的事件。

組件的input事件經過組件內部輸入框的input事件提交$emit，手動觸發。

因此爲了保持組件內input的value和input和組件的保持一致，組件內的 <input> 必須：

•  value 使用做爲prop 的value
•  input 綁定到組件的input事件

<custom-input v-model="searchText"></custom-input>
//至關於
<custom-input
  :value="searchText"
  @input="searchText = $event"
></custom-input>

//對應的input
Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      :value="value"
      @input="$emit('input', $event.target.value)"
    >
  `
})

以上是v-model的默認操做，可是像複選框用做單個選項這種使用checked屬性而不是value屬性，能夠用實例的model 選項從新定義默認的prop和事件：

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      :checked="checked"
      :change="$emit('change', $event.target.checked)"
    >
  `
})

 

v-model修飾符

 .lazy：默認狀況下（沒有指定input的type），觸發input 事件將輸入框的值與數據進行同步，給v-model添加 lazy 修飾符，轉變爲使用 change 事件進行同步：

<!-- 在「change」時而非「input」時更新 -->
<input v-model.lazy="msg" >

.number：將用戶的輸入值轉爲數值類型，由於即便在 type="number" 時，HTML 輸入元素的值也會是字符串。

.trim：過濾用戶輸入的首尾空白字符