双向数据绑定v-model的实现原理

什么?真有人面试时被问到双向数据绑定v-model的实现原理了吗??这不是送分题吗!!!

v-model 本质其实就是 value属性 和 input事件 一层包装:

数据发生了改变,页面自动变化,依托于 v-bind:value

页面输入改变,数据自动变化,依托于 v-on:input

示例代码:

<template>
  <div>
    # v-model实现双向数据绑定
    <input v-model="info" />
    <h2>{
   
   { info }}</h2>
    # value属性+input事件实现双向数据绑定
    <input :value="msg" @input="msg = $event.target.value" />
  <div>
</template>

<script>
export default {
  data() {
    return {
      info: '',
      msg: ''
    }
  }
}
</script>

End------------------------------

猜你喜欢

转载自blog.csdn.net/u011690675/article/details/130270205