v-model的使用

 目录

一、v-model 的原理

二、v-model 结合radio 使用

三、v-model 结合checkbox 类型单选使用

四、v-model 结合checkbox 多选使用

五、v-model 结合select 使用

六、v-model 的修饰符的使用

---

一、v-model 的原理

v-model指令用来实现表单元素和数据的双向绑定，等价于v-bind和v-on共同作用监听绑定数据；v-bind绑定value属性的值；v-on绑定input事件监听到函数中，函数会获取最新的值赋值到绑定的属性中

<div id="app">

          <input type="text" v-model="msg"/>

          <h2>{ {msg}}</h2>

        </div>

        <script src="../vue.js"></script>

        <script>

          const vm = new Vue({

            el:'#app',

            data(){

              return {

                msg:"呦呦鹿鸣~@"

              }

            }

          })

        </script>

​ v-model双向绑定，既输入框的value改变，对应的message对象值也会改变，修改message的值，input的value也会随之改变。无论改变那个值，另外一个值都会变化。 

同理于：

<div id="app">

            <input type="text" @input="changeValue" :value="msg"/>

            <h2>{ {msg}}</h2>

        </div>

        <script>

            const vm = new Vue({

                el:'#app',

                data(){

                    return {

                        msg:"呦呦鹿鸣~@"

                    }

                },

                methods:{

                    changeValue(e){

                        console.log(e