VueJS v-model 双向绑定

原理是包含了两个操作
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 //去除左右两端的空格