当前位置: 首页 > 工具软件 > v-modal > 使用案例 >

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

乐正宏深
2023-12-01

 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添加了一个新属性,所以是可行的。

 类似资料: