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>