v-model双向绑定的原理
什么是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实现了双向绑定。