雙向數據綁定的原理及實現


我們可以在表單元素和組價上用v-model去實現雙向數據綁定,它本質上是一個語法糖,就是在單向事件綁定的基礎上去使用了監聽用戶輸入事件並且更新數據的功能

我們首先來看一個v-model雙向數據綁定的例子

我們創建一個表單和一個p元素,要求表單里面的元素可以在p元素里顯示,並且p元素里面的初始文本也可以在表單里顯示,

這時我們只需要在表單上添加一個v-model綁定我們實例化出的數據即可。

那雙向數據綁定的原理是什么呢?我們再來看一個例子

 

 這個例子和之前的例子所要是實現的效果是一樣的,只不過將v-model去拆分成事件綁定和屬性綁定的而綜合,

我們在表單上創建一個input事件,即輸入內容就觸發,用v-on(@)去綁定這個事件,創建一個數據value,將表單里的內容賦值給創建的數據,這樣就完成了單向事件綁定,

那value里面的默認值怎么一開始顯示在表單里呢?我們就要使用v-bind(:)屬性綁定了,將表單的值value綁定起來,這樣value是什么內容,表單里就是什么內容了。

所以v-model的實質就是可以綁定一個表單元素的value,在修改表單的時候,data里的數據也會發生改變。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM