vue之v-model的原理

想必大家都了解v-model可以实现双向数据绑定,它是如何实现的呢?让我为大家介绍一下吧!
原理: v-model本质上是一个语法糖例如应用在输入框上,就是 value属性 和 input事件 的合写
作用:提供数据的双向绑定
1.数据发生改变,页面会自动变 :value
请输入搜索关键字
2.页面输入改变,数据会自动变 @input

注意:$event 用于在模板中,获取事件的形参

<template>
  <div>
    <input v-model="msg1" type="text"><br><br>
    
    
    
    <input :value="msg2" @input="msg2 = $event.target.value" type="text">
  div>
template>
<script>
export default {
  data() {
    return {
      msg1: '',
      msg2: ''
    };
  },
};
script>
<style scoped>style>

vue之v-model的原理_第1张图片
我们发现我们成功的实现了双向数据绑定

感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!

你可能感兴趣的:(vue.js,前端,javascript)