2.v-model、

v-model

在表单控件中使用

　　<input>

　　<select>

　　<textarea>

当在表单元素中，绑定了v-model，那么只要用户改变视图中的内容，那么就等同于直接改变数据。当然改变数据，一样会改变视图。

在使用v-model的时候，如果放个数组，那么会自动查找表单元素中的value，没有则出现null,如果要统计多个表单元素的信息，可以把同一个数据绑定到v-model上

        小曹:<input type="checkbox" value="小曹" v-model="arr"/>
        <hr>
        老美:<input type="checkbox" value="老美" v-model="arr"/>
        <hr>
        小燕子:<input type="checkbox" value="小燕子" v-model="arr"/>
        <hr>
        {{arr}}//这里会显示数组中的所有数据，所以把同一个 数据 绑定到 v-model 上
        new Vue({
            el:'#app',
            data:{
                b:false,
                arr:['小曹']
        },
    });

*** v-model中只能传数据变量，不能写成v-model = "true"、v-model = "{b:true}" 报错。只能用数据，v-model = "数据"

*** 在v-for中如果要循环数组，还要使用v-model，那么model中的值，应该传成arr[key],在改变数据的时候，使用赋值的方式更改数据。如果是对象，不能使用赋值的方式更改数据。

 

如果数组中是对象，那么在改变对象中的属性时，不用直接改变数据数组（原数组）

　　比如：arr=[{a:1},{b:2}]         改变的时候：this.arr.map(e=>e=!e)

如果数组中不是对象，那么改变数组的某个值的时候，要改变原数组。

　　比如：arr=[a,b]                  改变的时候： this.arr = this.arr.map(e=>e=!e)    （或者 数组方法 的 返回值，就是一个新数组，此时就不需要在 = 一下）

 

v-mode在下拉选框中的应用：

　　下拉选框：

　　　　　　<div id="app">

　　　　　　　　<select v-model="b">

　　　　　　　　　　<option disabled value="">==请选择==</option>

　　　　　　　　　　<option value="aa">上海</option>

　　　　　　　　　　<option value="bb">北京</option>

　　　　　　　　　　<option value="cc">杭州</option>

　　　　　　　　　　<option>长沙</option>

　　　　　　　　</select>

　　　　　　　　<p>{{b}}</p>                    这里输出内容，没有写 value 的会显示 <option> 的内容

　　　　　　</div>　　

在select中，直接绑上v-model，如果option中有value，选择的结果优先value值，如果没有value值，走option的内容。