基本用法

在基本用法中，v-model 指令可以用在以下三種類型的表單輸入元素上：

• <input>
• <textarea>
• <select>

在這些元素上使用 v-model 指令，可以將其值與一個(gè)數(shù)據(jù)屬性進(jìn)行雙向綁定。例如：

<div id="app">
  <p>Message is: {{ message }}</p>
  <input v-model="message">
</div>

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
});
app.mount('#app');

在這個(gè)例子中，我們使用 v-model 指令將 <input> 元素的值與 message 數(shù)據(jù)屬性進(jìn)行了雙向綁定。當(dāng)用戶在輸入框中輸入文本時(shí)，message 的值將會(huì)實(shí)時(shí)更新，反之亦然。

高級(jí)用法

在高級(jí)用法中，v-model 指令可以用在以下幾種情況下：

• 自定義修飾符
• 自定義事件
• 組件上使用 v-model

在 v-model 指令中，可以使用修飾符來修改其默認(rèn)行為。例如：

自定義修飾符

• .lazy：在輸入框失去焦點(diǎn)或用戶按下回車鍵時(shí)，才會(huì)更新數(shù)據(jù)。
• .number：將用戶輸入的值自動(dòng)轉(zhuǎn)換為數(shù)字類型。
• .trim：自動(dòng)去除用戶輸入的首尾空格。

例如：

<div id="app">
  <p>Message is: {{ message }}</p>
  <input v-model.lazy="message">
  <input v-model.number="age">
  <input v-model.trim="name">
</div>

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue!',
      age: 0,
      name: ''
    };
  }
});
app.mount('#app');

在這個(gè)例子中，我們使用了 .lazy、.number 和 .trim 三個(gè)修飾符，分別修改了 v-model 指令的默認(rèn)行為。

自定義事件

在某些情況下，我們需要在數(shù)據(jù)更新時(shí)觸發(fā)自定義事件，可以使用 v-model 指令的自定義事件功能。例如：

<div id="app">
  <p>Message is: {{ message }}</p>
  <input v-model="message" @input="onInput">
</div>

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  methods: {
    onInput(event) {
      console.log(event.target.value);
    }
  }
});
app.mount('#app');

在這個(gè)例子中，我們?cè)?<input> 元素上同時(shí)使用了 v-model 指令和 @input 事件監(jiān)聽器。當(dāng)用戶在輸入框中輸入文本時(shí)，message 的值將會(huì)實(shí)時(shí)更新，同時(shí)也會(huì)觸發(fā) onInput 方法。

組件上使用 v-model

在自定義組件中，我們可以使用 v-model 指令來實(shí)現(xiàn)與父組件的雙向數(shù)據(jù)綁定。例如：

<div id="app">
  <p>Message is: {{ message }}</p>
  <my-input v-model="message"></my-input>
</div>

const MyInput = {
  props: ['modelValue'],
  template: `
    <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
  `
};
const app = Vue.createApp({
  components: {
    MyInput
  },
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
});
app.mount('#app');

在這個(gè)例子中，我們定義了一個(gè)名為 MyInput 的自定義組件，并在其中使用了 v-model 指令。在組件中，我們使用了 props 和 $emit 來實(shí)現(xiàn)與父組件的雙向數(shù)據(jù)綁定。當(dāng)用戶在輸入框中輸入文本時(shí)，message 的值將會(huì)實(shí)時(shí)更新，反之亦然。

原理&默認(rèn)

組件中使用 v-model 的原理是：父組件將一個(gè)值傳遞給子組件的 props 屬性，子組件通過 $emit 方法觸發(fā)一個(gè)自定義事件，將新值傳遞回父組件。父組件接收到新值后，更新數(shù)據(jù)，從而實(shí)現(xiàn)雙向綁定。

在組件中使用 v-model 時(shí)，需要在組件中定義一個(gè) model 選項(xiàng)，該選項(xiàng)用于指定 v-model 綁定的 prop 和事件。model 選項(xiàng)是一個(gè)對(duì)象，包含以下兩個(gè)屬性：

• prop：用于指定綁定的 prop 名稱，默認(rèn)為 value。
• event：用于指定觸發(fā)更新的事件名稱，默認(rèn)為 input。

例如，在一個(gè)自定義的輸入框組件中，我們可以這樣使用 v-model：

<template>
  <input :value="value" @input="$emit('input', $event.target.value)">
</template>
<script>
export default {
  props: ['value'],
  model: {
    prop: 'value',
    event: 'input'
  }
}
</script>

在這個(gè)例子中，我們?cè)诮M件中定義了一個(gè) value prop，用于接收父組件傳遞過來的值。同時(shí)，我們?cè)诮M件中定義了一個(gè) model 選項(xiàng)，指定了 prop 為 value，event 為 input。這意味著，當(dāng)用戶在輸入框中輸入內(nèi)容時(shí)，組件會(huì)觸發(fā)一個(gè) input 事件，并將新值通過 $emit 方法傳遞回父組件。父組件接收到新值后，更新數(shù)據(jù)，從而實(shí)現(xiàn)雙向綁定。

在父組件中使用該組件時(shí)，可以這樣使用 v-model：

<template>
  <div>
    <p>Message is: {{ message }}</p>
    <my-input v-model="message"></my-input>
  </div>
</template>
<script>
import MyInput from './MyInput.vue';
export default {
  components: {
    MyInput
  },
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
}
</script>

在這個(gè)例子中，我們?cè)诟附M件中使用了 v-model 指令，將 message 數(shù)據(jù)綁定到了 my-input 組件上。當(dāng)用戶在輸入框中輸入內(nèi)容時(shí)，組件會(huì)觸發(fā)一個(gè) input 事件，并將新值傳遞回父組件。父組件接收到新值后，更新 message 數(shù)據(jù)，從而實(shí)現(xiàn)雙向綁定。

需要注意的是，在組件中使用 v-model 時(shí)，必須在組件中定義 model 選項(xiàng)，否則 v-model 不知道應(yīng)該綁定到哪個(gè) prop 和事件上。同時(shí)，在父組件中使用 v-model 時(shí)，必須將子組件的值綁定到一個(gè)數(shù)據(jù)屬性上，否則無法實(shí)現(xiàn)雙向綁定。

總之，組件中使用 v-model 可以實(shí)現(xiàn)組件和父組件之間的雙向數(shù)據(jù)綁定，原理是通過 props 和事件來實(shí)現(xiàn)的。在組件中使用 v-model 時(shí)，需要定義 model 選項(xiàng)，指定綁定的 prop 和事件。在父組件中使用 v-model 時(shí)，需要將子組件的值綁定到一個(gè)數(shù)據(jù)屬性上，從而實(shí)現(xiàn)雙向綁定。

到此這篇關(guān)于vue中v-mode詳解以及具體的使用示例的文章就介紹到這了,更多相關(guān)vue v-mode使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論