Vue模板語法 v model 雙向資料繫結

2022-08-23 15:21:14 字數 710 閱讀 6974

單向資料繫結是什麼?

資料模型(module)和檢視(view)之間的單向繫結。

需要我們先寫好模板,然後把模板和資料(可能來自後台)整合到一起形成html**,然後把這段html**插入到文件流裡面。 簡單的來說就是dom操作html元素。

單向資料繫結的缺點:一旦html**生成好後,就沒有辦法再進行改變了,如果有新的資料出現,那就必須要先把之前的html**刪掉,然後重新把新的資料和模板一起整合形成新的html**,再插入到文件流中。

雙向資料繫結是什麼?

資料模型和檢視之間的雙向繫結。

當資料發生變化的時候,檢視也就發生變化,當檢視發生變化的時候,資料也會跟著同步變化;可以這樣說使用者在檢視上的修改會自動同步到資料模型中去,資料模型也是同樣的變化。

雙向資料繫結的優點:無需和單向資料繫結那樣進行crud(create,retrieve,update,delete)操作,雙向資料繫結最常應用在就表單上,這樣當使用者在前端頁面完成輸入後,不用任何操作,我們就已經拿到了使用者輸入好的資料,並放到資料模型中了。

原生js實現簡單的雙向資料繫結

v-model

實現雙向資料繫結

v-model用法

在需雙向資料繫結的標籤中新增v-model指令

例子

Vue元件上使用v model雙向繫結

首先要明確它就是個語法糖 v model 相當於 onchange 的語法糖 text value name input name event.target.value 上面這個功能和v model是一致的 你自己也可以用 input監控輸入的結果 就可以找到target下面的value 下面有乙個...

8 資料雙向繫結(vue之v model)

v model資料雙向繫結 值變 頁面跟著變 input 框,使用 v model username 繫結上變數,以後,只要變數變化,頁面變化,頁面變化,變數變化 doctype html html lang en head meta charset utf 8 title title title ...

VUE 模板語法

message span 雙大括號裡面的內容會被替換成msg的變數值,在msg變數值改變的時候會自動更新html裡的內容 只輸出純文字文字,不會有html效果,為了輸出html需要用到v html指令 using mustaches p using v html directive v html r...