要用 Vue.js 將資料與輸入框做繫結,我們可在 vue 建立的同時設定用來繫結的屬性,然後在 HTML 的輸入框元素中使用 v-model 設定所要繫結的屬性,這樣設定後輸入框的資料就會被寫入指定的屬性中,而指定屬性其值的變化也會呈現在輸入框中。

像是下面這樣的程式:


Vue - Hello World

{{message}}

new Vue({
el: '#app',
data:{
message: "Hello World"
}
})

其運行結果如下,在輸入框中輸入什麼,下方就會顯示什麼。

1.png