目錄

前言

一、原生元素上的用法

1.?輸入框(input)

2.?多行文本域(textarea)

3.?單選按鈕(radio)

4.?多選框(checkbox)?

5.?下拉選擇框(select)?

二、自定義組件上的用法

1.?定義一個(gè)名為 modelValue 的 props 屬性和一個(gè)名為 update:modelValue 的事件

2.使用一個(gè)可寫(xiě)的，同時(shí)具有 getter 和 setter 的?computed?屬性

三、v-model修飾符

1.?lazy?修飾符

2.?number 修飾符

四、注意事項(xiàng)

前言

v-model 是 Vue 框架中用于實(shí)現(xiàn)雙向數(shù)據(jù)綁定的指令之一，在 Vue 3 中保留了這一特性，并對(duì)其進(jìn)行了一些改進(jìn)。Vue 3 的 v-model 指令更加靈活，可以適用于原生 HTML 元素和自定義組件，并支持修飾符的使用。

一、原生元素上的用法

在 Vue 3 中，我們可以通過(guò) v-model 在原生 HTML 元素上實(shí)現(xiàn)雙向數(shù)據(jù)綁定。v-model 可以應(yīng)用于 input、textarea 和 select 等表單元素。

1.?輸入框(input)

在Vue 3中，可以通過(guò)v-model指令實(shí)現(xiàn)對(duì)輸入框的雙向綁定。

<template>
  <div>
    <input v-model="message" type="text">
    <p>Message: {{ message }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const message = ref('')
</script>

2.?多行文本域(textarea)

<template>
  <div>
    <textarea v-model="message"></textarea>
    <p>Message: {{ message }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const message = ref('')
</script>

3.?單選按鈕(radio)

?對(duì)于單選按鈕，我們可以通過(guò)v-model指令綁定同一個(gè)name屬性，將其與一個(gè)變量進(jìn)行關(guān)聯(lián)。

<template>
  <div>
    <input type="radio" id="option1" value="option1" v-model="selectedOption">
    <label for="option1">Option 1</label>

    <input type="radio" id="option2" value="option2" v-model="selectedOption">
    <label for="option2">Option 2</label>

    <p>Selected Option: {{ selectedOption }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const selectedOption = ref('')
</script>

在上面的代碼中，我們使用v-model指令綁定了兩個(gè)單選按鈕，并通過(guò)selectedOption變量進(jìn)行雙向數(shù)據(jù)綁定。用戶選擇其中一個(gè)選項(xiàng)時(shí)，selectedOption變量會(huì)更新，并且變化會(huì)實(shí)時(shí)反映在頁(yè)面上。

4.?多選框(checkbox)?

<template>
  <div>
    <input type="checkbox" id="option1" value="option1" v-model="selectedOptions">
    <label for="option1">Option 1</label>

    <input type="checkbox" id="option2" value="option2" v-model="selectedOptions">
    <label for="option2">Option 2</label>

    <p>Selected Options: {{ selectedOptions }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const selectedOptions = ref([])
</script>

在這個(gè)例子中，我們使用v-model指令綁定了兩個(gè)多選框，并通過(guò)selectedOptions變量進(jìn)行雙向數(shù)據(jù)綁定。當(dāng)用戶選擇或取消選擇其中一個(gè)多選框時(shí)，selectedOptions變量會(huì)相應(yīng)地更新，并且變化會(huì)實(shí)時(shí)反映在頁(yè)面上。

注意：對(duì)于多選框，使用v-model進(jìn)行綁定的變量應(yīng)該是一個(gè)數(shù)組類(lèi)型，用于保存選中的多個(gè)選項(xiàng)的值。

5.?下拉選擇框(select)?

<template>
  <div>
    <select v-model="selectedOption">
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
    </select>

    <p>Selected Option: {{ selectedOption }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const selectedOption = ref('')
</script>

二、自定義組件上的用法

除了原生 HTML 元素，Vue 3 中的 v-model 還可以在自定義組件中使用。需要注意的是，自定義組件上使用v-model需要遵循一些規(guī)則。實(shí)現(xiàn)的方式有兩種。

默認(rèn)情況下，v-model?在組件上都是使用?modelValue?作為 prop，并以?update:modelValue?作為對(duì)應(yīng)的事件。

1.?定義一個(gè)名為 modelValue 的 props 屬性和一個(gè)名為 update:modelValue 的事件

父組件：v-model將message變量與該組件進(jìn)行雙向綁定

<template>
  <div>
    <child-component v-model="message"></child-component>
    <p>父組件：Message: {{ message }}</p>
  </div>
</template>

<script setup>
  import { ref } from 'vue'

  const message = ref('')
</script>

自定義組件：v-model默認(rèn)綁定的不是value，而是modelValue。發(fā)射的方法固定位為@update：modelValue。

<template>
  <div>
    子組件
    <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
  </div>
</template>

<script setup>
  defineProps({
    modelValue: {
      type: String
    }
  })
  defineEmits(['update:modelValue'])
</script>

在自定義組件的模板中，我們使用:value來(lái)綁定輸入框的值，并通過(guò)@input監(jiān)聽(tīng)輸入事件。同時(shí)，使用$emit函數(shù)觸發(fā)update:modelValue事件，將輸入框的新值傳遞給父組件。

通過(guò)使用props和事件，我們可以實(shí)現(xiàn)自定義組件上類(lèi)似于原生表單元素的雙向綁定效果。

?

2.使用一個(gè)可寫(xiě)的，同時(shí)具有 getter 和 setter 的?computed?屬性

父組件：同上

自定義組件：get 方法需返回 modelValue prop，而 set 方法需觸發(fā)相應(yīng)的事件。

<template>
  <div>
    子組件
    <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
  </div>
</template>

<script setup>
  import { computed } from 'vue'

  const props = defineProps({
    modelValue: {
      type: String
    }
  })
  defineEmits(['update:modelValue'])

  computed({
    get() {
      return props.modelValue
    },
    set(value) {
      emit('update:modelValue', value)
    }
  })
</script>

三、v-model修飾符

除了基本的雙向綁定外，Vue 3 的 v-model 還支持多種修飾符。常用的修飾符有 .lazy 和 .number。

1.?lazy?修飾符

.lazy?修飾符可以使輸入框的值在失去焦點(diǎn)時(shí)才進(jìn)行更新。例如：

<template>
  <div>
    <input type="text" v-model.lazy="message">
    <p>{{ message }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const message = ref('Hello, Vue 3!')

</script>

2.?number 修飾符

.number?修飾符可以將輸入框的值轉(zhuǎn)換為數(shù)值類(lèi)型。例如：

<template>
  <div>
    <input type="text" v-model.number="count">
    <p>Count: {{ count }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)

</script>

四、注意事項(xiàng)

1.?不是所有的原生元素都能直接使用 v-model。例如，<button> 元素不能直接使用 v-model 來(lái)實(shí)現(xiàn)雙向綁定，但可以使用其他的事件和方法來(lái)進(jìn)行狀態(tài)管理和更新。

2.?在自定義組件中修改modelValue的值時(shí)，應(yīng)當(dāng)使用響應(yīng)式的ref或reactive變量。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-634820.html

到了這里，關(guān)于Vue3中v-model在原生元素和自定義組件上的使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！