v-model的原理及三种实现方法

v-model

• 数据的双向绑定

在原生表中（最简单的实现方法）

<input type="text" v-model="name">

原理

1. 先给input绑定value属性值为数据name
2. 给input绑定input事件将其input的value值赋给数据name

第一种写法：

<input type="text" :value="name" @input="name=$event.target.value">

第二种写法：

<input type="text" :value="name" @input="change">

<script>
    let app = new Vue({
            el: '#app',
            data: {
                message: 'Hello'
            },
            methods: {
            change(event) {
                this.message = event.target.value;
            }
        }
    })
</script>