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

RELATEED CONSULTING
相關咨詢
選擇下列產品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網營銷解決方案
關于v-model你需要知道的這一切！

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

在盤錦等地區(qū)，都構建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產品創(chuàng)新能力，以專注、極致的服務理念，為客戶提供網站制作、做網站 網站設計制作按需求定制網站,公司網站建設,企業(yè)網站建設,品牌網站制作,成都全網營銷推廣,外貿營銷網站建設,盤錦網站建設費用合理。

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

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

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

v-model 是什么?

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

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

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

  
 
 
 
    
   
  
  
  
    2. 
   
  
  
  
  2. 
   
  
  
  
  3.

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

v-model 和 v-bind 之間的區(qū)別?

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

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

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

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

v-model 的修飾符

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

  
 
 
 
    
   
  
  
  
  1. 
   
  
  
  
  2.   type='text'
    3. 
   
  
  
  
  3.   v-model.trim.lazy='value'
    4. 
   
  
  
  
  4. />
    5.

.lazy

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

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

.number

通常，即使輸入的是數字類型，input也會自動將輸入的值變?yōu)樽址?。確保將我們的值作為數字處理的一種方法是使用.number修飾符。

根據Vue文檔，如果input發(fā)生變化，并且parseFloat()無法解析新值，那么將返回輸入的最后一個有效值。

  
 
 
 
    
   
  
  
  
  1. 
   
  
  
  
  2.   type='number'
    3. 
   
  
  
  
  3.   v-model.number='value'
    4. 
   
  
  
  
  4. />
    5.

.trim

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

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

在Vue中，數據綁定有兩個主要步驟：

從父節(jié)點傳遞數據

從子實例發(fā)出事件以更新父實例

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

  
 
 
 
    
   
  
  
  
    2. 
   
  
  
  
  2. 
   
  
  
  
    4. 
   
  
  
  
  4. 
   
  
  
  
  5. 
   
  
  
  
  6.    :modelValue="value"
    7. 
   
  
  
  
  7.    @update:modelValue="value = $event"
    8. 
   
  
  
  
  8. />
    9.

這到底是什么意思?

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

  
 
 
 
    
   
  
  
  
    2.

注意：當我們使用自定義模型名稱時，發(fā)出的方法的名稱將為update:name。

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

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

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

ok，首先來聲明一下：

  
 
 
 
    
   
  
  
  
  1. export default {
    2. 
   
  
  
  
  2.   props: {
    3. 
   
  
  
  
  3.     modelValue: String,
    4. 
   
  
  
  
  4.   }
    5. 
   
  
  
  
  5. }
    6.

接下來，將 modelValue 綁定到需要的元素，當值變化時，我們就通過update:modelValue 發(fā)出新值。

這樣就可以實現(xiàn)雙向綁定了。

v-model 的使用技巧

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

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

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

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

  
 
 
 
    
   
  
  
  
    2. 
   
  
  
  
  2. 
   
  
  
  
  3.

然后，我們內部的子組件:

  
 
 
 
    
   
  
  
  
    2. 
   
  
  
  
  2. 
   
  
  
  
  3.

運行后，可以看到兩個 v-model 都可以正常工作：

自定義 v-model 的修飾符

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

假設我們要創(chuàng)建一個修飾符，以刪除輸入的文本中的所有空格。我們稱之為no-whitespace ：

  
 
 
 
    
   
  
  
  
  1. 
   
  
  
  
  2.   v-model.no-whitespace='value' 
    3. 
   
  
  
  
  3.   v-model:lastName='lastName'
    4. 
   
  
  
  
  4. />
    5.

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

  
 
 
 
    
   
  
  
  
  1. props: {
    2. 
   
  
  
  
  2.   lastName: String,
    3. 
   
  
  
  
  3.   modelValue: String,
    4. 
   
  
  
  
  4.   modelModifiers: {
    5. 
   
  
  
  
  5.     default: () => ({})
    6. 
   
  
  
  
  6.   }
    7. 
   
  
  
  
  7. },
    8.

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

  
 
 
 
    
   
  
  
  
    2. 
   
  
  
  
  2. 
   
  
  
  
  3.       type='text'
    4. 
   
  
  
  
  4.       :value='modelValue'
    5. 
   
  
  
  
  5.       placeholder='Input'
    6. 
   
  
  
  
  6.       @input='emitValue("modelValue", $event)'
    7. 
   
  
  
  
  7. />
    8.

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

  
 
 
 
    
   
  
  
  
  1. emitValue(propName, evt) {
    2. 
   
  
  
  
  2.   let val = evt.target.value
    3. 
   
  
  
  
  3.   if (this.modelModifiers['no-whitespace']) {
    4. 
   
  
  
  
  4.     val = val.replace(/\s/g, '')
    5. 
   
  
  
  
  5.   }
    6. 
   
  
  
  
  6.   this.$emit(`update:${propName}`, val)
    7. 
   
  
  
  
  7. }
    8.

運行，完美：

總結

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

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

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

作者：Michael Thiessen

譯者：前端小智 來源：news

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

本文轉載自微信公眾號「大遷世界」，可以通過以下二維碼關注。轉載本文請聯(lián)系大遷世界公眾號。


網頁題目：關于v-model你需要知道的這一切！
網站鏈接：http://www.dlmjj.cn/article/dpgjpee.html