摘要：
这很常见{｛item｝｝已选择：｛｛hob｝}------temps:[“Display 1”，“Display 2”，“Display3”，“Display 4”]，hob:[]，修饰符lazy，number，trimv model。lazy//失去焦点或按Enter键绑定v-model分配给数字//v-model变量的值是字符串类型。如果添加数字，它将变为数字，这便于转换v型。修剪//以删除左端和右端的空格
原理是包含了两个操作
1.v-bind绑定了value属性
2.v-on 给当前元素绑定input事件
简单示例
<input type="text" v-model="str">
{{str}}
----
str:"asd"
延伸：
下面通过js更改str属性，也可以实现input value的改变，但是value改变不会更改str的值
<input type="text" :value="str">
{{str}}
可以在绑定一个事件，去调用方法，变更str的值
<input type="text" :value="str" @input="change"> //骚操作 @input="str=$event.target.value"
{{str}}
----
change(event){
this.str=event.target.value
}
结合radio 单选框使用
简单示例
性别单选框，默认选择男
<label>
<input type="radio" value="男" v-model="sex">男
</label>
<label>
<input type="radio" value="女" v-model="sex">女
</label>
<h2>选择的性别为：{{sex}}</h2>
-----
sex:"男"
结合checkbox 多选框使用
<input type="checkbox" value="篮球" v-model="hob">男
<input type="checkbox" value="足球" v-model="hob">足球
<input type="checkbox" value="乒乓球" v-model="hob">乒乓球
<input type="checkbox" value="羽毛球" v-model="hob">羽毛球
<h2>选择的爱好有：{{hob}}</h2>
----
hob:[]
结合select 选择使用
单选
<select v-model="fruit">
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
</select>
<h2>选择的水果：{{fruit}}</h2>
------
fruit:""
多选 //multiple 这个是可以多选的
<select v-model="fruits" multiple>
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
</select>
<h2>选择的水果：{{fruits}}</h2>
---
fruits:[]
值绑定,结合 v-for使用。这个很常用
<label v-for="item in temps" >
<input type="checkbox" :value="item" v-model="hob">{{item}}
</label>
<h2>选择的：{{hob}}</h2>
-----
temps:["显示1","显示2","显示3","显示4"],
hob:[],
修饰符 lazy、number、trim
v-model.lazy //失去焦点或者回车绑定
v-model.number // v-model 变量赋值的都是string类型,加上number就会变成number，方便转换
v-model.trim //去除左右两端的空格