Vue 框架早已經(jīng)不是 MVVM（Mode-View-View-Model） 雙向綁定了。早在 Vue 1.0 時(shí)代，Vue 在剛出世的時(shí)候的確是 MVVM 雙向綁定。自 Vue 2.0 以來(lái)，Vue 就不再是雙向綁定了，而是像 React 一樣是單向綁定 MV（Model-View）了。但是，在 Vue 中仍保留了雙向綁定的接口，v-model 就是。

1. 基本用法

<template>
 <div id="app">
  <input v-model="x">
  {{x}}
 </div>
</template>

<script>
export default {
 data(){
  return {
   x: 'init'
  }
 }
}

在 JS 中修改 x 的值，input 輸入框里也會(huì)隨之改變。同樣地，在頁(yè)面中的 input 輸入框內(nèi)手動(dòng)輸入值，變量 x 的值也會(huì)隨之改變。對(duì)象里的變量改變會(huì)影響視圖的 input 的改變，視圖中 input 的改變會(huì)影響對(duì)象里變量 x 值的改變。這就是雙向綁定（Model-View-View-Model）。

2. v-model

實(shí)質(zhì)上述使用 v-model 的代碼等價(jià)于如下代碼：

<template>
 <div id="app">
  <input :value="x" @input="x = $event.target.value">
  {{x}}
 </div>
</template>

<script>
export default {
 data(){
  return {
   x: 'init'
  }
 }
}
</script>

v-model 幫我們做的事就是，為 input 的 value 值設(shè)置一個(gè)動(dòng)態(tài)綁定，然后在輸入框的 input 事件觸發(fā)后實(shí)時(shí)修改動(dòng)態(tài)綁定的 value 的變量值。因此 v-model 實(shí)質(zhì)是上述方式的語(yǔ)法糖。

$event 是原生 DOM 事件里的 event 事件對(duì)象。

3. v-model 的修飾符

所有修飾符都是起一個(gè)輔助的作用，其實(shí)可以在函數(shù)里自己判斷條件實(shí)現(xiàn)。.lazyv-model 默認(rèn)監(jiān)聽(tīng)的是輸入框的input 事件，原生 DOM 的input 事件就是記錄實(shí)時(shí)的輸入變化值。但是，我們有時(shí)不需要實(shí)時(shí)記錄結(jié)果，只需要記錄最終輸入的結(jié)果值就可以了。

input 的原生 DOM 事件中還有一個(gè)change 事件，該事件是在輸入框失去焦點(diǎn)時(shí) 或 按下回車(chē)鍵時(shí) 執(zhí)行的。v-model 里以.lazy 修飾符的方式切換至該監(jiān)聽(tīng)模式。

<template>
 <div id="app">
  <input v-model.lazy="x">
  {{x}}
 </div>
</template>等價(jià)于：<template>
 <div id="app">
  <input :value="x" @change="x = $event.target.value">
  {{x}}
 </div>
</template>

.number.number修飾符是在輸入內(nèi)容改變后進(jìn)行變量賦值時(shí)，自動(dòng)使用 parseFloat() 函數(shù)將其變成數(shù)字。使用該修飾符時(shí)變量的初始值必須是數(shù)字。

<template>
 <div id="app">
  <input v-model.number="x">
  {{x}}
 </div>
</template>

<script>
export default {
 data(){
  return {
   x: 0
  }
 }
}
</script>

• .trim

.trim修飾符是將輸入的內(nèi)容改變后進(jìn)行變量賦值時(shí)，自動(dòng)忽略和去除前后的空格。更為精準(zhǔn)地記錄輸入的字符串內(nèi)容。

<template>
 <div id="app">
  <input v-model.trim="x">
  {{x}}
 </div>
</template>

<script>
export default {
 data(){
  return {
   x: 'init'
  }
 }
}
</script>

4. 自定義輸入框的 v-modelv-model

的基本用法僅僅適用于原生的輸入框元素 ，對(duì)于用戶自己封裝的輸入框，可以用如下方式使用 v-model。當(dāng)用在組件上時(shí)，v-model 的實(shí)質(zhì)如下：

<custom-input v-model="x"></custom-input>

等價(jià)于：

<custom-input :value="x" @input="x = $event"></custom-input>

因此，在自定義表單組件里的寫(xiě)法如下：

<template>
  <div class="wrapper">
    <input :value="value" @input="$emit('input', $event.target.value)">
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String
    }
  }
}
</script>

<style scoped>
  .wrapper{
    border: 2px solid blue;
    display: inline-block;
  }
  .wrapper input{
    color: red;
  }
</style>
<template>
 <div id="app">
  <MyInput v-model="x"/>
  {{x}}
 </div>
</template>

<script>
import MyInput from './components/MyInput'
export default {
 data(){
  return {
   x: 0
  }
 },
 components:{
  MyInput
 }
}
</script>

補(bǔ)充：若想在自定義組件里面的原生輸入框也使用 v-model，可以根據(jù)組件 v-model 的實(shí)質(zhì)，使用計(jì)算屬性的賦值方式為=使用。

以上就是Vue 的 v-model用法實(shí)例的詳細(xì)內(nèi)容，更多關(guān)于vue v-model的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論