[筆記][Vue.js]打開Vue.js世界的大門(4) | v-model用法
HI!記得我們在第一篇[1]的時候有提過如何將Vue.js的資料綁定到View上面嗎?如果忘記的話可以看一下以下最簡單的範例:HTML
HI!記得我們在第一篇[1]的時候有提過如何將Vue.js的資料綁定到View上面嗎?如果忘記的話可以看一下以下最簡單的範例:HTML
<input id="name" :value="text" >JavaScript
let name = new Vue({ el:#name, data:{ text:神Q超人, }, })透過指定HTML的元件來創建一個Vue物件,並在物件中用data屬性傳入資料物件,這是一個Vue.js對View的單向綁定,而Vue.js還有提供雙向綁定!我們今天就來提一下要如何做到雙向綁定!
v-model在Vue.js中有個v-model屬性可以做到這件事情,他可以對input、textarea、select、checkbox和checkbox這堆全部讓使用者輸入的表單做雙向的綁定,主要是透過事件去監聽使用者輸入的事件來更新我們一開始給的,感覺是不是很厲害?讓我們動手做看看吧!
input像第一篇說的,Vue.js的用法都非常直覺,感覺很難的v-model也是,只需要將v-model當做屬性加到input裡面就可以了!HTML
<div id="name"> <!--為input設定一個v-model屬性,並將綁定的資料設定為text--> <input v-model="text" :value="text"> <div>您的姓名是:{{text}}</div> </div>JavaScript
//這裡把資料拆出來 let nameData = { text : 神Q超人 } let name = new Vue({ el:#name, data:nameData, })在HTML的部分,我們將text這個資料綁定在三個地方,分別是input的預設值、div的內容和我們今天提到的v-model,因為v-model的關係,他在監聽到in...