今天的码农女孩学习了关于v-model的知识并结合表单做出了练习

v-model:当我们在输入框输入内容时，因为input中的v-model发生改变时，因为上面我们使用了Mustache语法，将message的值插入到DOM中，所以DOM会发生响应的改变，所以通过v-model实现了双向绑定

原理：v-model其实是一个语法糖，它的背后本质上是包含两个操作1.v-bind绑定了一个value属性；2.v-on指令给当前元素绑定input事件

    <div id="app">
        <input type="text" v-model="message">
        <h2>{{message}}</h2>
    </div>
    <script>
        const app=new Vue({
            el:"#app",
            data:{
                message:'hello'
            }
        })
    </script>

v-model结合radio:点击哪个单选按钮就在下面输出对应的性别

    <div id="app">
        <label for="nan">
            <input type="radio" id="nan" name="sex" value="男" v-model="sex">男
        </label>
        <label for="nv">
            <input type="radio" id="nv" name="sex" value="女" v-model="sex">女
        </label>
        <h2>你选择的性别是:{{sex}}</h2>
    </div>
    <script>
        const app=new Vue({
            el:"#app",
            data:{
                message:'hello',
                sex:''
            }
        })
    </script>

v-model结合checkbox:

checkbox单选框:点击同意协议下一步才可以点击，否则下一步禁用，布尔类型

checkbox多选框:点击对应的多选框就会在下面显示对应的爱好内容,数组类型

   <div id="app">
        <!-- 1.checkbox单选框 -->
        <label for="agree">
            <input type="checkbox" id="agree" v-model="isAgree">同意协议
        </label>
        <button :disabled="!isAgree">下一步</button>
        <br>
        <!-- 2.checkbox多选框 -->
            <input type="checkbox" value="篮球" v-model="hobby">篮球
            <input type="checkbox" value="足球" v-model="hobby">足球
            <input type="checkbox" value="棒球" v-model="hobby">棒球
            <input type="checkbox" value="排球" v-model="hobby">排球
            <h2>你的爱好是：{{hobby}}</h2>
    </div>
    <script>
        const app=new Vue({
            el:"#app",
            data:{
                message:'hello',
                isAgree:false,
                hobby:[]
            }
        })
    </script>

v-model结合select:两种类型选出相应的水果

     <div id="app">
        <!-- 1.选择一个 字符串类型-->
        <select name="sg" v-model="fruit">
            <option value="苹果">苹果</option>
            <option value="香蕉">香蕉</option>
            <option value="橙子">橙子</option>
            <option value="橘子">橘子</option>
            <option value="草莓">草莓</option>
            <option value="葡萄">葡萄</option>
        </select>
        <h2>你选择的水果是:{{fruit}}</h2>
        <!-- 2.选择多个 数组类型-->
        <select name="sg" v-model="fruits" multiple>
            <option value="苹果">苹果</option>
            <option value="香蕉">香蕉</option>
            <option value="橙子">橙子</option>
            <option value="橘子">橘子</option>
            <option value="草莓">草莓</option>
            <option value="葡萄">葡萄</option>
        </select>
        <h2>你选择的水果是:{{fruits}}</h2>
    </div>
    <script>
        const app=new Vue({
            el:"#app",
            data:{
                message:'hello',
                fruit:'香蕉',//默认选择
                fruits:[]
            }
        })
    </script>