vue自定v-model實現(xiàn)表單數(shù)據(jù)雙向綁定問題
更新時間：2018年09月03日 11:27:39 作者：一口老血吐在屏幕上的代碼工
vue.js的一大功能便是實現(xiàn)數(shù)據(jù)的雙向綁定。這篇文章主要介紹了vue自定v-model實現(xiàn) 表單數(shù)據(jù)雙向綁定的相關(guān)知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
vue.js的一大功能便是實現(xiàn)數(shù)據(jù)的雙向綁定，本文給大家介紹vue自定v-model實現(xiàn)表單數(shù)據(jù)雙向綁定，具體內(nèi)容如下所示：
子組件代碼如下
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)了雙向綁定。
總結(jié)
以上所述是小編給大家介紹的vue自定v-model實現(xiàn)表單數(shù)據(jù)雙向綁定，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
vue+webpack dev本地調(diào)試全局樣式引用失效的解決方案
今天小編就為大家分享一篇vue+webpack dev本地調(diào)試全局樣式引用失效的解決方案，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要給大家介紹了關(guān)于vue使用Echarts繪制地圖的相關(guān)資料,Apache ECharts一個基于JavaScript的開源可視化圖表庫,提供了常規(guī)的折線圖、柱狀圖、散點圖、餅圖、K線圖,用于統(tǒng)計的盒形圖,需要的朋友可以參考下2023-09-09
vue前端測試開發(fā)watch監(jiān)聽data的數(shù)據(jù)變化
這篇文章主要為大家介紹了vue測試開發(fā)watch監(jiān)聽data的數(shù)據(jù)變化，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-05-05
Vue3和Vue2基本差不多，只不過需要將createRouter、createWebHistory從vue-router中引入，再進行使用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-09-09
詳解Vue項目在其他電腦npm run dev運行報錯的解決方法
這篇文章主要介紹了詳解Vue項目在其他電腦npm run dev運行報錯的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
這篇文章主要介紹了vue3頁面加載完成后如何獲取寬度、高度問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue動態(tài)路由路徑重復(fù)及刷新丟失頁面問題的解決
這篇文章主要介紹了Vue動態(tài)路由路徑重復(fù)及刷新丟失頁面問題的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
解決vue3中使用echart報錯:Cannot read properties of&n
在Vue項目中使用Echarts進行數(shù)據(jù)可視化是非常常見的需求,然而有時候在引入Echarts的過程中可能會遇到報錯,本文主要介紹了解決vue3中使用echart報錯:Cannot read properties of undefined (reading ‘type‘),感興趣的可以了解一下2024-01-01
這篇文章主要介紹了詳解vue 數(shù)組和對象渲染問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了Vue2單一事件管理組件通信的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05