用範例理解Vue.js #13:v | v-model用法
你可以用v-model指令建立雙向數據綁定,在Day2的範例06-FormInputBindings已經使用過了。範例回顧Day2[1]:透過v-model可雙向綁定input和vueinstance的message。 {{message}}
你可以用 v-model 指令建立雙向數據綁定,在 Day2 的範例 06 - Form Input Bindings 已經使用過了。
範例回顧 Day2[1]:
透過 v-model 可雙向綁定 input 和 vue instance 的 message。
<div id="app-6"> <p>{{ message }}</p> <input v-model="message"> </div> var app6 = new Vue({ el: #app-6, data: { message: Hello Vue! } })附上 fiddle (https://jsfiddle.net/hunterliu/hakh94ro/1/[2])
那v-model實際上是什麼?其實v-model本質上是語法糖,負責監聽使用者的輸入事件並更新數據。v-model 會選擇 Vue Instance 中綁定的 data 作為初始值,而不是表單元素(form)中的 value, checked, selected。
下面主要分為「基礎用法」和「綁定 value」,為避免重複太多範例,「基礎用法」會有兩個範例分別為:Textarea、Checkbox;「綁定 value」會有兩個範例分別為:Radio、Select。
基礎用法這部分就看看官方範例吧(偷懶)。
Textarea綁定 Textarea 和 p tag。
<span>Multiline message is:</span> <p style="white-space: pre-line;">{{ msg }}</p> <br> <textarea v-model="msg" placeholder="add multiple lines"></textarea> var vm = new Vue...