基本用法

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

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

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

<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');

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

高級用法

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

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

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

自定義修飾符

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

例如：

<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');

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

自定義事件

在某些情況下，我們需要在數(shù)據(jù)更新時觸發(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');

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

組件上使用 v-model

在自定義組件中，我們可以使用 v-model 指令來實現(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');

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

原理&默認

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

在組件中使用 v-model 時，需要在組件中定義一個 model 選項，該選項用于指定 v-model 綁定的 prop 和事件。model 選項是一個對象，包含以下兩個屬性：

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

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

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

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

在父組件中使用該組件時，可以這樣使用 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>

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

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

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

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

最新評論