什么?真有人面试时被问到双向数据绑定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------------------------------