v-model原理

最新推荐文章于 2024-02-27 16:07:36 发布

造梦者FZ

最新推荐文章于 2024-02-27 16:07:36 发布

阅读量89

点赞数 2

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

本文链接：https://blog.csdn.net/qq_43923146/article/details/125937791

版权

vue 同时被 2 个专栏收录

80 篇文章 5 订阅

订阅专栏

前端面试题

7 篇文章 0 订阅

订阅专栏

v-model原理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input placeholder="请输入名字" id='name'/><br/>
    显示值：<p id="uname"></p>
</body>
</html>

<script>

// v-model原理
let obj={}
// 第三步：由于劫持了obj的username属性，只要这个属性值一发生变化就能够发现
Object.defineProperty(obj,'username',{
    // 取值
    get:function(){
        console.log('取值')
    },
    set:function(val){
        console.log('设置值')
        document.getElementById('uname').innerText=val// 第四步：值改变了就会进入到set,然后将改变的值赋给p标签
    }
})
// 第一步：监听input的键盘事件
   document.getElementById('name').addEventListener('keyup',function(){
    console.log(event)
    obj.username=event.target.value//第二步： 将键盘输入的变化的内容赋给obj的username的这个属性
   })
</script>