刚开始学的时候，真的被复选框的v-model坑过，傻傻的每个都绑定了同一个字符串，结果发现点击一个，其余的都会变，然后返回去看了一下官网才知道，是要绑定数组的，而且还要指定value的值，每次点击，对应的值就会存入数组中。
```<template>
<div>
<!-- Vue建议v-model用在input,textarea,select -->
<ul>
<li>
<input type="text" v-model="mode1" />
<span>mode1: {{ mode1 }}</span>
</li>
<li>
<textarea name="" id="" cols="30" rows="10" v-model="mode2"></textarea>
<span>mode2: {{ mode2 }}</span>
</li>
<li>
<select name="" id="" v-model="mode3">
<option value="派大星">派大星</option>
<option value="海绵宝宝">海绵宝宝</option>
<option value="章鱼哥">章鱼哥</option>
</select>
<span>mode3: {{ mode3 }}</span>
</li>
<li>
<!-- 我觉得有坑点的地方就是在复选框这块，需要注意 -->
<!-- 绑定v-model绑定一个数组,值是value -->
<input type="checkbox" value="派大星" v-model="arr" />
<input type="checkbox" value="章鱼哥" v-model="arr" />
<input type="checkbox" value="海绵宝宝" v-model="arr" />
<span>arr:{{ arr }}</span>
</li>
<li>
<input type="radio" value="珊迪" v-model="str" />
<input type="radio" value="痞老板" v-model="str" />
<span>str:{{ str }}</span>
</li>
<li>
<!-- lazy是v-model的修饰符之一，该input事件触发后数据才会同步 -->
<input type="text" v-model.lazy="last" />
<span>last:{{ last }}</span>
</li>
<li>
<!-- number是v-model的修饰符之一，转v-model的绑定的值为数字 -->
<input type="text" v-model.number="num" />
<span>num:{{ num }}</span>
</li>
<li>
<!-- trim是v-model的修饰符之一，将绑定的字符串去除两边的空格 -->
<input type="text" v-model.trim="space" />
<span>space:{{ space }}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
mode1: '',
mode2: '',
mode3: '',
arr: [],
str: '',
last: '',
num: '',
space: ''
}
}
}
</script>
