Vue2_v-model 底层原理

1、从数据层影响视图层

通过 v-bind 给input框中的 value 属性绑定事件

<template>
  <div>
    <input type="text" :value="msg">
  </div>
</template>
<script>
export default {
   data(){
     return {
      msg: 'hello',
     }
   }
}
</script>
<style></style>

2、从视图层影响数据层

通过 v-on 给input绑定方法，注意是“@input” 

将事件对象event监听的value变化赋值给msg，达到双向绑定

<template>
  <div>
    <input type="text" :value="msg" @input="handle">
  </div>
</template>
<script>
export default {
   data(){
     return {
      msg: 'hello',
     }
   },
   methods:{
    handle(event){
      this.msg = event.target.value;
    }
   }
}
</script>
<style></style>