千年殇,雪鹰领主,完美世界国际版下载

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

在Vue3中使用v-model來構(gòu)建復(fù)雜的表單

在本文中，我們會介紹Vue 3中 v-model? 指令的變化。然后，再通過一個事例講解下如何使用多個v-model綁定來簡化Vue中復(fù)雜表單的構(gòu)建過程。

創(chuàng)新互聯(lián)建站網(wǎng)站建設(shè)公司一直秉承“誠信做人，踏實做事”的原則，不欺瞞客戶，是我們最起碼的底線！以服務(wù)為基礎(chǔ)，以質(zhì)量求生存，以技術(shù)求發(fā)展，成交一個客戶多一個朋友！專注中小微企業(yè)官網(wǎng)定制，網(wǎng)站設(shè)計、網(wǎng)站制作，塑造企業(yè)網(wǎng)絡(luò)形象打造互聯(lián)網(wǎng)企業(yè)效應(yīng)。

什么是 v-model 指令

v-model? 指令可以在表單輸入元素上實現(xiàn)雙向數(shù)據(jù)綁定，比如 input? 元素、textarea? 元素和 select 元素等等。

它以兩種方式處理數(shù)據(jù)更新：

當(dāng)輸入的值發(fā)生變化時，v-model 會將該值反映到組件內(nèi)部的狀態(tài)
當(dāng)組件的狀態(tài)發(fā)生變化時，v-model 會將變化反映到表單輸入元素上

默認(rèn)情況下，v-model 指令使用不同的屬性，并為不同的輸入元素發(fā)出不同的事件：

input? 和textarea? 對應(yīng)value? 屬性和input 事件
checkboxes? 和radio? 對應(yīng)checked? 屬性和change 事件
select? 對應(yīng)value ?屬性和change 事件

如果，我們自定義一個 v-model，大致實現(xiàn)如下：

在父組件中，就可以這樣使用了：

在自定義組件中，v-model? 指令假定已經(jīng)定義了一個內(nèi)部屬性，名稱為 modelValue?，并發(fā)出了一個名為 update:modelValue 的事件。

我們也可以并不局限于默認(rèn)的命名規(guī)則，自行選擇我們要使用的名字。為我們的v-model綁定有描述性的名字。

只要確保在選擇命名屬性時保持一致就可以了。這里有一個自定義名稱fullName?的例子，用于modelValue屬性。

在父組件中，就可以這樣使用了：

注意：這里不能用簡寫的形式了，因為 modelValue? 是默認(rèn)的，可以在使用時候直接使用 v-model?，而我們自定義的 v-model? 需要寫上對應(yīng)的修飾符名稱 v-model:fullName。

v-model 是如何處理數(shù)據(jù)綁定的？

v-model?指令有三個可用于數(shù)據(jù)綁定的修飾器：.lazy、.number? 和 .trim。

.lazy

在默認(rèn)情況下，v-model? 在每次 input 事件觸發(fā)后將輸入框的值與數(shù)據(jù)進(jìn)行同步。你可以添加 lazy ?修飾符，從而轉(zhuǎn)為在 change 事件之后進(jìn)行同步：

.number

如果想自動將用戶的輸入值轉(zhuǎn)為數(shù)值類型，可以給 v-model? 添加 number 修飾符：

.trim

如果要自動過濾用戶輸入的首尾空白字符，可以給 v-model? 添加 trim 修飾符：

Vue3 中的 v-model 與 Vue2 有什么不同？

在 Vue 2.0 發(fā)布后，開發(fā)者使用 v-model? 指令時必須使用名為 value? 的 prop?。如果開發(fā)者出于不同的目的需要使用其他的 prop，他們就不得不使用 v-bind.sync?。此外，由于v-model? 和 value 之間的這種硬編碼關(guān)系的原因，產(chǎn)生了如何處理原生元素和自定義元素的問題。

在 Vue 2.2 中，我們引入了 model? 組件選項，允許組件自定義用于 v-model? 的 prop? 和事件。但是，這仍然只允許在組件上使用一個 v-model。

在 Vue 3 中，雙向數(shù)據(jù)綁定的 API 已經(jīng)標(biāo)準(zhǔn)化，以減少開發(fā)者在使用 v-model 指令時的混淆，并且更加靈活。

多個 v-model 綁定

現(xiàn)在，我們來看看如何使用多個 v-model 指令綁定來簡化復(fù)雜的Vue表單。

例子中，我們將使用一個結(jié)賬表單，列出用戶的名字、姓氏和電子郵件地址，然后是一些與賬單和交付有關(guān)的字段。

創(chuàng)建可重用的組件

如上圖所示 Billing 和 Delivery 都有 street name?, street number?, city?, 和 postcode 字段。所以，我們可以創(chuàng)建一個可重復(fù)使用的地址組件

首先，用如下命令，創(chuàng)建一個新的項目：

vue create

然后，在 src/components? 目錄下創(chuàng)建可重用 AddressFieldGroup.vue?。這個可重用的組件將被導(dǎo)入 App.vue 文件中。

AddressFieldGroup.vue 內(nèi)容如下：

上面代碼對四個字段：streetName、streetNumber、city? 和 postcode，實現(xiàn)一個雙向綁定，即：

:value="city"
@input="$emit('update:city', $event.target.value)"

這樣，我們在外部就可以使用 v-model:字段名來實時獲取輸入的值。

現(xiàn)在，將該組件導(dǎo)入 App.vue 中使用，如下所示：

在上面的代碼中，我們創(chuàng)建了一個 CheckoutForm?，它包含三個輸入字段：firstName?, lastName?, 和 email?。我們還在表單中嵌入了兩次可重復(fù)使用的 AddressFieldGroup組件，用它來表示用戶的 Billing Address 和 Delivery Address.。

我們使用v-model:{property-name}?格式來綁定兩個自定義 AddressFieldGroup 組件上的每個屬性。

總結(jié)

在這篇文章中，我們探討了 v-model? 指令，確定了哪些Vue修飾器可以和它一起使用，并演示了如何在Vue組件上使用多個 v-model 綁定來簡化復(fù)雜Vue表單的創(chuàng)建。

v-model?讓我們可以靈活地在一個組件實例上添加多個 v-model? 指令，而且 modelValue 也可以根據(jù)我們的偏好進(jìn)行重命名。

事例地址：https://codesandbox.io/s/v-model-multi-binding-bzp5gz

名稱欄目：在Vue3中使用v-model來構(gòu)建復(fù)雜的表單
標(biāo)題路徑：http://fisionsoft.com.cn/article/dpjppjo.html

新聞中心

什么是 v-model 指令

v-model 是如何處理數(shù)據(jù)綁定的？

.lazy

.number

.trim

Vue3 中的 v-model 與 Vue2 有什么不同？

多個 v-model 綁定

創(chuàng)建可重用的組件

{{ label }}

Checkout Form

總結(jié)

其他資訊

新聞中心

什么是 v-model 指令

v-model 是如何處理數(shù)據(jù)綁定的？

.lazy

.number

.trim

Vue3 中的 v-model 與 Vue2 有什么不同？

多個 v-model 綁定

創(chuàng)建可重用的組件

{{ label }}

Checkout Form

總結(jié)

其他資訊

Vue3 中的 v-model 與 Vue2 有什么不同？