v-model是什么？vue的v-model绑定一个对象中没有的属性会怎么样？

墨明棋妙Mi

已于 2023-06-02 16:23:03 修改

阅读量3.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue.js 前端 javascript

于 2022-10-26 11:36:31 首次发布

本文链接：https://blog.csdn.net/z1216108894/article/details/127528512

前端专栏收录该内容

5 篇文章

订阅专栏

本文主要介绍了Vue.js中v-model的相关知识。v-model是vue的双向绑定指令，view层输入值会影响data属性值，data属性值改变也会更新view层。还说明了view层和data属性值相互影响的原理，以及v-model绑定对象中没有的属性是可行的。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.v-modal是什么

v-model就是vue的双向绑定的指令，view层输入值影响data的属性值，data属性值发生改变会更新view层的数值变化。

2.view层影响data属性值

含有v-model这个属性的input元素，则会为这个input元素添加一个input事件，当监听从页面输入值的时候，来更新vue实例中的data想对应的属性值。

element.addEventListener("input",function(e){
    vm.key=e.target.value;
})

3.data属性值影响view层

初始化vue实例时候，会递归遍历data的每一个属性，并且通过defineProperty来监听每一个属性，当某个属性重新赋值，则更新相对于的input元素。

 Object.defineProperty(data,key,{
        get(){
            return data[key];
        },
        set(newVal){
            data[key]=newVal;
            // element是对应元素节点
            element.value=newVal;
        }    
    })

4 .v-modal绑定一个对象中没有的属性是可行的

<template>
    <input v-model="obj.a">
</template>

<script>
export default {
  data(){
    return{
      obj:{}
    }
  }
}
</script>

在修改表单后，view层影响data属性值，监听到了表单变化运行了vm.obj.a=e.target.value，于是给obj添加了一个新属性，所以是可行的。