首页
/
每日頭條
/
生活
/
使用v-model注意事項
使用v-model注意事項
更新时间:2025-04-01 05:16:52

本文已經過原作者 ichael Thiessen 授權翻譯。

Vue v-model是一個指令,它提供了input和form之間或兩個組件之間的雙向數據綁定。

這是Vue開發中的一個簡單概念,但v-model的真正威力需要花些時間才能理解。

本文主要講解v-model的不同用例,并學習如何在自己的項目中使用它。

v-model 是什麼?

剛才講過,``v-model`是一個我們可以在模闆代碼中使用的指令。指令是一個模闆令牌,它告訴 Vue 我們想要如何處理 DOM。

在v-model的情況下,它告訴Vue我們想要在template 中的值和data屬性中的值之間創建一個雙向數據綁定。

使用v-model的一個常見用例是在設計表單相關的一些元素時。我們可以使用它使input元素能夠修改Vue實例中的數據。

<template> <div> <input type='text' v-model='value' /> <p>Value:{{value}}</p> </div> </template> <script> exportdefault{ data(){ return{ value:'HelloWorld' } } } </script>

當我們在input中輸入内容時,我們會看到我們的數據屬性正在變化

使用v-model注意事項(關于v-model你需要知道的這一切)1

v-model 和 v-bind 之間的區别?

v-bind指令通常會與v-model切換。兩者的區别在于v-model提供了雙向數據綁定。

在我們的例子中,這意味着如果我們的數據改變了,我們的input也會改變,如果我們的input改變了,我們的數據也會改變。

而 v-bind 隻以一種方式綁定數據。

當我們想在自己的應用中創建一個清晰的單向數據流時,這是非常有用的。但是,在v-model和v-bind之間選擇時必須小心。

v-model 的修飾符

Vue 提供了兩個修飾符,允許我們更改v-model的功能。每一個都可以像這樣加起來,甚至可以連接在一起。

<input type='text' v-model.trim.lazy='value' />

.lazy

默認情況下,v-model在每個input事件上與Vue實例的狀态(數據屬性)同步。這包括獲得/失去焦點等。

.lazy修改器修改了我們的v-model,所以它隻在更改事件之後同步。這減少了v-model試圖與Vue實例同步的次數,在某些情況下,還可以提高性能。

.number

通常,即使輸入的是數字類型,input也會自動将輸入的值變為字符串。确保将我們的值作為數字處理的一種方法是使用.number修飾符。

根據Vue文檔,如果input發生變化,并且parseFloat()無法解析新值,那麼将返回輸入的最後一個有效值。

<input type='number' v-model.number='value' />

.trim

與大多數編程語言中的trim方法類似,.trim修飾符在返回值之前删除開頭或結尾的空白。

在自定義組件中使用 v-model

在Vue中,數據綁定有兩個主要步驟:

  1. 從父節點傳遞數據
  2. 從子實例發出事件以更新父實例

在自定義組件上使用v-model可以讓我們傳遞一個 prop,用一個指令來處理一個事件。

<custom-text-inputv-model="value"/> <!--ISTHESAMEAS--> <custom-text-input :modelValue="value" @update:modelValue="value=$event" />

這到底是什麼意思?

使用v-model傳遞的值的默認名稱是modelValue。但是,我們也可以像這樣傳遞一個自定義名稱。

<custom-text-inputv-model:name="value"/>

注意:當我們使用自定義模型名稱時,發出的方法的名稱将為update:name。

使用v-model注意事項(關于v-model你需要知道的這一切)2

在自定義組件中使用 v-model

在自定義組件中使用 v-mode ,需要做兩件事:

  1. 在 props 中接收 v-model 的值。
  2. 當對應的值變化時,發出一個更新事件

ok,首先來聲明一下:

exportdefault{ props:{ modelValue:String, } }

接下來,将 modelValue 綁定到需要的元素,當值變化時,我們就通過update:modelValue 發出新值。

這樣就可以實現雙向綁定了。

使用v-model注意事項(關于v-model你需要知道的這一切)3

v-model 的使用技巧

上面介紹了如果在自定義組件中使用 v-model,現在來看看一些v-model指令更高級的用法。

對一個組件多次使用v-model

v-model并不局限于每個組件隻能使用一個。要多次使用v-model,我們隻需要确保唯一命名,并在子組件中正确訪問它。

為下面的組件添加第二個 v-model,這裡先命名為 lastName:

<template> <div> <custom-text-input v-model='value' v-model:lastName='lastName' /> <p>Value:{{value}}</p> <p>LastName:{{lastName}}</p> </div> </template> <script> importCustomTextInputfrom'./CustomTextInput.vue' exportdefault{ components:{ CustomTextInput, }, data(){ return{ value:'Matt', lastName:'Maribojoc' } } } </script>

然後,我們内部的子組件:

<template> <div> <label>FirstName</label> <input type='text' :value='modelValue' placeholder='Input' @input='$emit("update:modelValue",$event.target.value)' /> <label>LastName</label> <input type='text' :value='lastName' placeholder='Input' @input='$emit("update:lastName",$event.target.value)' /> </div> </template> <script> exportdefault{ props:{ lastName:String, modelValue:String, } } </script>

運行後,可以看到兩個 v-model 都可以正常工作:

使用v-model注意事項(關于v-model你需要知道的這一切)4

自定義 v-model 的修飾符

Vue中内置了一些修飾符,但這些遠遠不夠,所以有時我們需要自定義自己的修飾符。

假設我們要創建一個修飾符,以删除輸入的文本中的所有空格。我們稱之為no-whitespace :

<custom-text-input v-model.no-whitespace='value' v-model:lastName='lastName' />

在組件内,我們可以使用 props 來捕獲修改器。自定義修飾符的名稱是nameModifiers

props:{ lastName:String, modelValue:String, modelModifiers:{ default:()=>({}) } },

我們要做的第一件事是改變@input處理器來使用一個自定義方法。我們可以稱它為emitValue,它接受正在編輯的屬性和事件對象的名稱。

<label>FirstName</label> <input type='text' :value='modelValue' placeholder='Input' @input='emitValue("modelValue",$event)' />

在emitValue方法中,在調用$emit之前,我們要檢查修飾符。如果no-whitespace修飾符為true,則可以在将其發送給父對象之前修改該值。

emitValue(propName,evt){ letval=evt.target.value if(this.modelModifiers['no-whitespace']){ val=val.replace(/\s/g,'') } this.$emit(`update:${propName}`,val) }

運行,完美:

使用v-model注意事項(關于v-model你需要知道的這一切)5

總結

希望本文能教給大家一些有關Vue v-model的新知識。

在它的基本用例(如表單和input數據)中,v-model是一個非常簡單的概念。然而,當我們創建自定義組件并處理更複雜的數據時,我們可以釋放v-model的真正威力。

~完,我是刷碗智,我要去刷碗了,我們下期見!


作者:Michael Thiessen 譯者:前端小智 來源:news

原文:https://learnvue.co/2021/01/everything-you-need-to-know-about-vue-v-model/

,
Comments
Welcome to tft每日頭條 comments! Please keep conversations courteous and on-topic. To fosterproductive and respectful conversations, you may see comments from our Community Managers.
Sign up to post
Sort by
Show More Comments
推荐阅读
内存為什麼隻有一個c
内存為什麼隻有一個c
簡述一下堆和棧的區别1、堆棧空間分配不同。棧由操作系統自動分配釋放,存放函數的參數值,局部變量的值等。堆區一般由程序員分配釋放。2、堆棧緩存方式不同。棧使用的是一級緩存,它通常都是在被調用時處于存儲空間中,調用完畢後立即釋放;堆則存放在二級...
2025-04-01
如何做可以讓天竺葵開花
如何做可以讓天竺葵開花
如何做可以讓天竺葵開花?天竺葵喜歡充足的陽光,怕陰,也怕強光暴曬怕高溫卻不耐寒,冬季養植溫度不能低于10℃,否則容易發生葉片發黃,甚至葉片脫落現象盆栽天竺葵養植環境要陽光充足,朝東或朝南的窗台,溫度保持在16℃以上,植株會開花不斷,今天小編...
2025-04-01
為什麼手上會長小水泡特别癢
為什麼手上會長小水泡特别癢
進入夏秋交替的季節,生活中很多人的手上都長出了透明性的小水泡,雖然體積不大,但是特别的騷癢,而且過一段時間還會破裂脫屑,進而容易給正常的工作和學習帶來困擾。那麼手上長出來的透明小水泡到底是什麼呢?怎樣才能夠緩解這一問題?如果你也想要知道答案...
2025-04-01
無糖飲料的營銷方法
無糖飲料的營銷方法
在2003年以前,國内的飲料市場,被“三大巨頭”品類牢牢掌控——碳酸飲料、瓶裝飲用水以及茶飲料。在那個被電視壟斷媒體資源的年代,幾乎每看三個廣告,就會跳出一個上述品類的廣告。然而就在2003年,果汁行業突然崛起,各大品牌開始在果汁市場發力,...
2025-04-01
草龜的飼養方法
草龜的飼養方法
草龜的飼養方法?草龜可以吃龜飼料、小魚蝦、米飯、蔬菜、水果、瘦肉,小龜偏肉食,成龜偏素食,我來為大家科普一下關于草龜的飼養方法?以下内容希望對你有幫助!草龜的飼養方法草龜可以吃龜飼料、小魚蝦、米飯、蔬菜、水果、瘦肉,小龜偏肉食,成龜偏素食。...
2025-04-01
Copyright 2023-2025 - www.tftnews.com All Rights Reserved