學姐教你學VUE.JS系列之第二課:vue數據雙向綁定

vue數據雙向綁定

學姐教你學VUE.JS系列之第二課:vue數據雙向綁定

用 v-model 指令在表單控件元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。

有時候,我們需要做一個輸入框,用戶輸入的內容需要隨時校驗,Vue的雙向綁定就是最佳的方案。雙向綁定很簡單,我們就看看她的代碼是怎麼實現的:

學姐教你學VUE.JS系列之第二課:vue數據雙向綁定

v-model="name" 就是把{{name}}和綁在一起了,當input標籤的鍵值發生變化時,{{name}}隨之改變。

學姐教你學VUE.JS系列之第二課:vue數據雙向綁定

舉一反三

文本框綁定:

您輸入的是:

{{ message }}