vmodel詳解

一、vmodel語法糖

vmodel是Vue.js提供的一種語法糖，它可以方便地實現數據的雙向綁定。一個v-model綁定一個變數，其響應式語法會將DOM元素的值與數據變數保持同步。

代碼中的v-model指令會將元素的value屬性與Vue實例的message變數保持同步，當message變數發生變化時，輸入框內的內容也會發生變化，反之亦然。

v-model還可以綁定到其他輸入類型的DOM元素上，比如checkbox、radio、textarea等。

二、vmodel修飾符

在某些情況下，我們可以為v-model指令加上修飾符，來擴展v-model指令的功能。Vue提供了很多v-model指令的修飾符，下面介紹最常用的一些。

1. .lazy修飾符：指定元素的改變會在「change」事件觸發時而不是「input」事件觸發時更新。

2. .number修飾符：將用戶的輸入轉換成數字類型，v-model綁定的變數也會變成數字類型。

3. .trim修飾符：自動過濾用戶輸入的首尾空格。

三、vmodel可以綁定兩個值嗎

v-model指令只能綁定一個值，如果需要綁定多個值，需要使用Vue提供的計算屬性來實現。

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

四、vmodel 還有vbind

v-model和v-bind都是Vue.js的指令，但是v-model用於表單元素的雙向數據綁定，而v-bind則用於將Vue實例中的數據綁定到表單元素的屬性上，實現單向數據綁定。

例如，下面代碼將input元素的placeholder屬性綁定到Vue實例的message變數上：

五、vmodel和dom元素的value衝突

如果我們在Vue組件中使用了等DOM元素，並且使用了v-model指令，那麼我們需要注意的是：在組件模板中使用v-model時，它會把value屬性當作默認的 prop，並把當前值當作默認的 prop 值。

Vue.component('my-component', {

props: ['value'],

template: `
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/190062.html