驗證 不使用v model指令,雙向繫結能否實現

2021-10-08 04:06:58 字數 780 閱讀 4900

vue 是 基於 mvvm 框架的,mvvm實現了雙向繫結,但 vue 還有個指令v-model也能事項雙向繫結。那麼,問題來了,在不使用v-model指令的情況下,mvvm能實現雙向繫結更新資料嗎?

答案:能。

舉個例子:簡單的乙個輸入框,輸入資料,回車,新增任務。

使用v-model,輸入框裡的資料實時改變,插入到任務陣列中的資料也進行改變;

但我現在不關心單個資料的變化,我想看下,如果不使用v-model,任務陣列改變後,能不能顯示在頁面上。

"demosky"

>

>

v-for

="(item,index) in arr"

>

}-----}li

>

ul>

type

="text"

@change

="add()"

>

div>

>

newvue(,

,,],

val:"",

},methods:);

this

.val="";

}}})

script

>

可以看出,雖然沒有將輸入框裡的資料新增進去,但是arr更新後,頁面也進行了更新。

這說明了什麼呢?vue 模型資料發生變化,會觸發相應部分的dom進行重新渲染。

雙向繫結原理性問題:

v model指令 雙向資料繫結

什麼是雙向資料繫結 vue是乙個mvvm框架,即資料雙向繫結,它允許當資料發生變化的時候,檢視也發生變化,當檢視發生變化的時候,資料也會跟著同步變化。我們所說的資料雙向繫結,一定是對於ui控制項來說的,非ui控制項不會涉及到資料雙向繫結。簡述雙向繫結 所謂雙向繫結,當m層資料更改時自動更新v層資料,...

Vue的v model指令的雙向繫結原理

表單在實際開發中是非常常見的,特別是對於使用者資訊的提交,需要大量的表單。vue中使用v model指令來實現表單元素和資料的雙向繫結,示例 type text v model message h2 div src js vue.js script newvue script 案例的解析 注意 v ...

使用v model雙向繫結子元件

在專案中經常會遇到子元件向父元件傳遞值的情況。例如封裝乙個ih input元件,需要把他的值傳遞給父元件,通常的做法是利用 emit去觸發某一事件,把值作為引數傳遞出去。這種做法是最基本的,但不好的就是在父元件中需要寫乙個方法作為事件的呼叫,用起來覺得繁瑣!還有乙個更乾脆的辦法就是利用v model...