js檔案

var vm = new Vue({
        el: '#app',
        data: {
            msg : '',
            age : undefined,
            space: '',
            gender : '',
            checked : '',
            multiChecked : [],
            selected : '',
            multiSelected : [],
            a : 'aaa',
            b : 'bbb'
        }
    })
 

1.text

<input type="text" v-model="msg">
<span>Your inputs is : {{ msg }} </span>

使用者輸入內容與vm.msg直接繫結

2.Radio

<label><input type="radio" value="male" v-model="gender">男</label>
<label><input type="radio" value="female" v-model="gender">女</label>
<p> {{ gender }} </p>
 

gender即為選中的radio元素的value值

3.CheckBox （1）單個勾選框，v-model即為布林值

<input type="checkbox" v-model="checked">
<span>checked: {{ checked }} </span>

（2）多個勾選框，v-model使用相同的屬性名稱，且屬性為陣列

<label><input type="checkbox" value="1" v-model="multiChecked">1</label>
<label><input type="checkbox" value="2" v-model="multiChecked">2</label>
<label><input type="checkbox" value="3" v-model="multiChecked">3</label>
<p>MultiChecked : {{ multiChecked.join(',') }} </p>
 

4.selected （1）單選

<select v-model="selected">
      <option selected>A</option>
      <option>B</option>
      <option>C</option>
</select>
<span>Selected : {{ selected }} </span>

（2）多選

5.繫結value 表單控制元件的值可以繫結在Vue例項的動態屬性上，用v-bind實現 例項：

<input type="checkbox" v-model="checked" v-bind:true-value="a" v-bind:false-value="b">
<span>checked: {{ checked }} </span>

選中：vm.checked == vm.a 未選中：vm.checked == vm.b

6.引數特性 有三個： .lazy .number .trim 1）.lazy在輸入框中，v-model 預設是同步資料，使用 .lazy 會轉變為在 change 事件中同步 ，也就是在失去焦點 或者 按下回車鍵時才更新

<input type="text" v-model.lazy="msg">
<span> {{ msg }} </span>

2）.number 修飾符可以將 輸入的值轉化為Number型別 ，否則雖然你輸入的是數字，但它的型別其實是String

<input type="text" v-model.number="age">
<span> {{ typeof(age) }} </span>

3）.trim 修飾符會自動過濾掉輸入的首尾空格

<input type="text" v-model.trim="space">
<span> 您輸入的內容長度是：{{ space.length }} </span>