vue如何使用v-model

這篇文章主要為大家展示了“vue如何使用v-model”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“vue如何使用v-model”這篇文章吧。

v-model 語法糖

v-model 常用于表單元素上進行數據的雙向綁定，比如 <input>。除了原生的元素，它還能在自定義組件中使用。

v-model 是一個語法糖，可以拆解為 props: value 和 events: input。就是說組件必須提供一個名為 value 的 prop，以及名為 input 的自定義事件，滿足這兩個條件，使用者就能在自定義組件上使用 v-model。比如下面的示例，實現了一個數字選擇器：

<template>
  <div>
    <button @click="increase(-1)">減 1</button>
    <span >{{ currentValue }}</span>
    <button @click="increase(1)">加 1</button>
  </div>
</template>
<script>
  export default {
    name: 'InputNumber',
    props: {
      value: {
        type: Number
      }
    },
    data () {
      return {
        currentValue: this.value
      }
    },
    watch: {
      value (val) {
        this.currentValue = val;
      }
    },
    methods: {
      increase (val) {
        this.currentValue += val;
        this.$emit('input', this.currentValue);
      }
    }
  }
</script>

props 一般不能在組件內修改，它是通過父級修改的，因此實現 v-model 一般都會有一個 currentValue 的內部 data，初始時從 value 獲取一次值，當 value 修改時，也通過 watch 監聽到及時更新；組件不會修改 value 的值，而是修改 currentValue，同時將修改的值通過自定義事件 input 派發給父組件，父組件接收到后，由父組件修改 value。所以，上面的數字選擇器組件可以有下面兩種使用方式：

<template>
  <InputNumber v-model="value" />
</template>
<script>
  import InputNumber from '../components/input-number/input-number.vue';

  export default {
    components: { InputNumber },
    data () {
      return {
        value: 1
      }
    }
  }
</script>

或：

<template>
  <InputNumber :value="value" @input="handleChange" />
</template>
<script>
  import InputNumber from '../components/input-number/input-number.vue';

  export default {
    components: { InputNumber },
    data () {
      return {
        value: 1
      }
    },
    methods: {
      handleChange (val) {
        this.value = val;
      }
    }
  }
</script>

如果你不想用 value 和 input 這兩個名字，從 Vue.js 2.2.0 版本開始，提供了一個 model 的選項，可以指定它們的名字，所以數字選擇器組件也可以這樣寫：

<template>
  <div>
    <button @click="increase(-1)">減 1</button>
    <span >{{ currentValue }}</span>
    <button @click="increase(1)">加 1</button>
  </div>
</template>
<script>
  export default {
    name: 'InputNumber',
    props: {
      number: {
        type: Number
      }
    },
    model: {
      prop: 'number',
      event: 'change'
    },
    data () {
      return {
        currentValue: this.number
      }
    },
    watch: {
      value (val) {
        this.currentValue = val;
      }
    },
    methods: {
      increase (val) {
        this.currentValue += val;
        this.$emit('number', this.currentValue);
      }
    }
  }
</script>

在 model 選項里，就可以指定 prop 和 event 的名字了，而不一定非要用 value 和 input，因為這兩個名字在一些原生表單元素里，有其它用處。

以上是“vue如何使用v-model”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！