什么是v-model？

v-model用在form表单时：

 v-model:双向绑定指令，数据发生变化，界面会更新，界面更新，数据也会发生变化

 v-model 其实是绑定了一个value和oninput事件

当输入框使用v-model绑定一个字符串数据，绑定数据显示在value属性上，用户通过输入控制绑定数据，修改数据也可以实现输入框的value属性的变化

<input type="text" v-model="v1">
        <p>{{v1}}</p>

2.当输入框为多选框，并且多选框是一个单选的效果，绑定一个布尔类型的数据 ,如果布尔数据类型数据为true的时候，多选框被选中

<input type="checkbox" v-model="v2">
        <p>{{v2}}</p>

3 当输入框为多选框，并且有多个选项的时候 v-model绑定的数据源是一个数组，数组的元素和value属性如果保持一致，证明该选项被选中

<input type="checkbox" name="hobby" v-model="arr" value="basketball">篮球
        <input type="checkbox" name="hobby" v-model="arr" value="sing">唱歌rap
        <input type="checkbox" name="hobby" v-model="arr" value="dance">跳舞
        <p>{{arr}}</p>

4 当输入框为单选框的时候， v-model可以绑定一个字符串数据，双向绑定变量和value数据保持一致，radio处于选中状态

<input type="radio" name="sex" v-model="v3" value="男">男
        <input type="radio" name="sex" v-model="v3" value="女">女
        <p>{{v3}}</p>

5 输入框为下拉菜单的时候  option的value属性和v-model双向绑定苏剧如果相等了，证明该选项被选中

<select v-model="v4">
            <option>李白</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <p>{{v4}}</p>

js代码端：别忘了引用vue.js

<script src='vue.js'></script>
<script>
    new Vue({
        el: '#myApp',
        data: {
            v1:"vue基础指令",
            v2:true,
            arr:["basketball","sing"],
            v3:"男",
            v4:"2"
        },
        methods: {
            
        }
    })
</script>