首页 > 技术文章 > v-model双向绑定的原理

nicolelhh 2021-01-11 23:23 原文

什么是v-model双向绑定?

用户在输入框中输入内容value和开发人员定义的数据data,当用户输入内容改变,data也改变,相应的在页面中渲染的相关的值也会变化,开发人员修改data时,输入框中的value也会跟着变化。

 

双向绑定如何实现的,手写一个双向绑定的实现?

<template>
<div id="app">
  <input v-bind:value="message" @input="changeValue">
  <span>{{ message }}</span>
</div>
</template>

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

这样就利用v-bind和v-on实现了双向绑定。

推荐阅读