v-model 双向绑定

data() {
 return {
    check:false
  }
},
<div id="root">
  {{check}}
  <input type="checkbox" v-model="check"/>
</div>

多选

data() {
 return {
    name:[]  //数组
  }
},
<div id="root">
  {{name}}
  张三<input type="checkbox" v-model="name" value="张三"/>
  李四<input type="checkbox" v-model="name" value="李四"/>
  王五<input type="checkbox" v-model="name" value="王五"/>
</div>

单选

data() {
 return {
    name:""  //字符串
  }
},
<div id="root">
  {{name}}
  张三<input type="radio" v-model="name" value="张三"/>
  李四<input type="radio" v-model="name" value="李四"/>
  王五<input type="radio" v-model="name" value="王五"/>
</div>

select

data() {
 return {
    message:"" //可以多选时，[]
  }
},
<div id="root">
  {{message}}
  <select v-model="message">
    <option disabled value="">请选择内容</option>  //value 为空是为了匹配message里的空字符串
    <option>A</option>
    <option>B</option>
  </select>
</div>

options:[
      {text:'a',value:'A'},
      {text:'b',value:'B'},
      {text:'c',value:'C'}
    ]
<div id="root">
   {{message}}
   <select v-model="message">
     <option v-for="item in options" :key="item.text">{{item.value}}</option>
   </select>
 </div>

data() {
 return {
    message:"hello"
  }
},
<div id="root">
  {{message}}
 <input type="checkbox" v-model="message" true-value="hello" false-value="world"/> //默认是勾选的话值就是true否则为false,现在勾选的话就是hello,否则就是world
</div>

修饰符：
v-model.lazy 就是键盘按下不会立即改变data，只有当鼠标在input表单外面点击一下（触发blur）才行
v-model.number 在向data存值之前会将字符串转化为数字
v-model.trim