日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

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

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

什么是 v-model 指令

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.lazy

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

.number

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

.trim

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

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

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

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

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

多個(gè) v-model 綁定

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

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

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

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

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

vue create 

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

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

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

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

這樣，我們?cè)谕獠烤涂梢允褂?nbsp;v-model:字段名 來(lái)實(shí)時(shí)獲取輸入的值。

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

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

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

總結(jié)

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

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

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

網(wǎng)站名稱：在Vue3中使用v-model來(lái)構(gòu)建復(fù)雜的表單
瀏覽路徑：http://www.dlmjj.cn/article/dpjppjo.html