1.基本應用

（a）輸入框(input)，文字域(textarea)

<div id="app">
  <input v-model="message"/>
  <p>{{ message }}</p>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    message: '輸入框內容'
  }
})
</script>

（b）複選框(type='checkbox')

<div id="app">
  <p>單個複選框：</p>
  <input type="checkbox" v-model="checked">
    
  <p>多個複選框：</p>
  <input type="checkbox" value="val001" v-model="checkedNames">
  <input type="checkbox" value="val002" v-model="checkedNames">
  <input type="checkbox" value="val003" v-model="checkedNames">
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    checked : true,     //單複選框初始化-選中
    checkedNames: []    //多複選框初始化-都不選中
  }
})
</script>
 

（c）單選按鈕(type='radio')

<div id="app">
  <input type="radio" value="val001" v-model="picked">
  <br>
  <input type="radio" value="val002" v-model="picked">
  <br>
  <span>選中值為: {{ picked }}</span>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    picked : 'val001'    //第一個單選按鈕初始化為選中狀態
  }
})
</script>
 

（d）下拉選單(select)

<div id="app">
  <select v-model="selected">
    <option value="0">0000</option>
    <option value="1">1111</option>
    <option value="2">2222</option>
  </select>
  <p>選擇的是: {{selected}} </p>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    selected: '2'     //初始化-選擇value=2的選項
  }
})
</script>
 

2.雙向繫結修飾符

（a）.lazy (轉變同步事件)  

預設情況下， v-model 在 input 事件中同步輸入框的值與資料，新增一個修飾符 lazy ，轉變為在 change 事件中同步。

<input v-model.lazy="msg" >

（b）.number (格式化輸入值為數字型別，一般用於type=‘number’中)

將使用者的輸入值轉為 Number 型別（原值的轉換結果為 NaN 則返回原值），可以新增一個修飾符 number 。

<input v-model.number="age" type="number">

（c）.trim (去除收尾空格)

自動過濾使用者輸入的首尾空格（中間空格無法處理），可以新增 trim 修飾符到 v-model 上過濾輸入。

<input v-model.trim="msg" value="  收尾空格不會輸出  ">

3.常用場景（待補充）

場景一：全選&取消全選

<div id="app">
    <input type="checkbox" v-model="checked" @change="changeAllChecked()">{{checked}}
    <br/>
    <input type="checkbox" value="val001" v-model="checkedNames">val001
    <input type="checkbox" value="val002" v-model="checkedNames">val002
    <input type="checkbox" value="val003" v-model="checkedNames">val003
    <br/>
    <span>
        選擇的值為:{{checkedNames}}
    </span>
</div>
<script>
new Vue({
    el: '#app',
    data: {
        checked: false,
        checkedNames: [],
        checkedArr: ["val001", "val002", "val003"]
    },
    methods: {
        changeAllChecked: function() {
            if (this.checked) {
                this.checkedNames = this.checkedArr
            } else {
                this.checkedNames = []
            }
        }
    },
    watch: {
        "checkedNames": function() {
            if (this.checkedNames.length == this.checkedArr.length) {
                this.checked = true
            } else {
                this.checked = false
            }
        }
    }
})
</script>

場景二：表單校驗

<div id="app">
    <input v-model.trim="val" @keydown="changeInput()"/>    
    //監聽輸入框變化最好不要用change，可能會無效
    <span style="color:red"> {{msg}} </span>
</div>

<script>
    new Vue({
        el:"#app",
        data:{
            val:"",
            msg:"此為必填項!"
        },
        methods:{
            changeInput:function(){
                if(String(this.val).length==0){
                    this.msg="此為必填項!"
                }else{
                    this.msg=""
                }
            }
        }
    })
</script>