v-model的原理

最新推荐文章于 2024-07-30 16:49:30 发布

圥忈&&丅佽&&扗虖

最新推荐文章于 2024-07-30 16:49:30 发布

阅读量173

点赞数

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

本文链接：https://blog.csdn.net/weixin_45940312/article/details/127785179

版权

vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<h1>v-model的原理</h1>
<!-- 1.双向数据绑定  -->
<input placeholder="请输入名字" id="username"/>
<div>显示值：<p id="uName"></p></div>
<script>
   let obj={}
   Object.defineProperty(obj,'username',{
       // 取值
       get:()=>{
           console.log("取值");
       },
       set:(val)=>{
           console.log(val,"设置值");
           document.getElementById('uName').innerText=val
       }
   })
   document.getElementById('username').addEventListener('keyup', ()=>{
       console.log(event);
       // event 
       obj.username= event.target.value
   })
</script>