vue.js的一大功能便是實現數據的雙向綁定，本文給大家介紹vue自定v-model實現表單數據雙向綁定，具體內容如下所示：

子組件代碼如下

v-model語法糖

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

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

通過該語句實現price變量與輸入值雙向綁定

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

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

以上代碼分幾個步驟：

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

2.監聽input事件（input輸入框都有該事件，當輸入內容時自動觸發該事件），當輸入框輸入內容就單向改變price的值

這樣就實現了雙向綁定。

總結

以上所述是小編給大家介紹的vue自定v-model實現表單數據雙向綁定，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！