怎么在vue中自定v-model實現(xiàn)表單數(shù)據(jù)雙向綁定

發(fā)布時間：2021-06-01 17:28:22 來源：億速云閱讀：133 作者：Leah 欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)怎么在vue中自定v-model實現(xiàn)表單數(shù)據(jù)雙向綁定，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

具體內(nèi)容如下所示：

子組件代碼如下

怎么在vue中自定v-model實現(xiàn)表單數(shù)據(jù)雙向綁定

v-model語法糖

v-model實現(xiàn)了表單輸入的雙向綁定，我們一般是這么寫的：

<div id="app">
  <input v-model="price">
 </div>
new Vue({
  el: '#app',
   data: {
     price: ''
   }
 });

通過該語句實現(xiàn)price變量與輸入值雙向綁定

實際上v-model只是一個語法糖，真正的實現(xiàn)是這樣的：

 <input type="text" 
　　　　　　:value="price" 
　　　　　　@input="price=$event.target.value">

以上代碼分幾個步驟：

1.將輸入框的值綁定到price變量上，這個是單向綁定，意味著改變price變量的值可以改變input的value，但是改變value不能改變price

2.監(jiān)聽input事件（input輸入框都有該事件，當(dāng)輸入內(nèi)容時自動觸發(fā)該事件），當(dāng)輸入框輸入內(nèi)容就單向改變price的值

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

關(guān)于怎么在vue中自定v-model實現(xiàn)表單數(shù)據(jù)雙向綁定就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

猜你喜歡