vue2知识点总结 - vue表单双向绑定 - 《vue》

<body>
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
    <div id='myApp'>
        1, 输入框双向绑定 <br>
        <input type="text" v-model="name"> -{{name}}-  <hr>
        2, 单选的双向绑定 <br>
        男<input type="radio" v-model="sex" name="sex" value="男">
        女<input type="radio" v-model="sex" name="sex" value="女"> 
        -{{sex}}- <hr>
        3, 多选的双向绑定 <br>
        语文<input type="checkbox" v-model="list" value="语文">
        数学<input type="checkbox" v-model="list" value="数学">
        英语<input type="checkbox" v-model="list" value="英语">
        体育<input type="checkbox" v-model="list" value="体育">
        美术<input type="checkbox" v-model="list" value="美术">
        -{{list}}- <hr>
        4, 下拉列表的双向绑定 <br>
        <select v-model="age">
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
        </select>
        -{{age}}- <hr>
        5, 日期双向绑定<br>
        <input type="date" v-model="date"> -{{date}}- <hr>
        6, 颜色双向绑定<br>
        <input type="color" v-model="myColor"> -{{myColor}}- <hr>
        <!-- 表单双向数据绑定的本质: v-model 通过v-bind绑定value属性和v-on绑定input事件实现  需要自己实现input事件函数的赋值-->
        <input type="text" v-bind:value="name" v-on:input="nameChange">
    </div>
    <script>
        new Vue({
            el: '#myApp',
            data: {
                name: "张三",
                sex: "女",
                list: ["数学"],
                age: 14,
                date: "2021-11-03",
                myColor: "#ff0000"
            },
            methods: {
                nameChange(e){
                    this.name = e.target.value
                }
            }
        })
    </script>
</body>