首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >原生js实现vue的数据双向绑定

原生js实现vue的数据双向绑定

作者头像
何处锦绣不灰堆
发布于 2021-07-19 15:41:34
发布于 2021-07-19 15:41:34
2.3K0
举报
文章被收录于专栏:农历七月廿一农历七月廿一

写在前面

很多面试官在面试的时候为了显示自己很牛,喜欢问面试者,你会不会使用原生js实现vue的双向绑定啊,每次我遇到这种面试官我都想揍他一顿,不是说这个问题问得不好,我就想问问,我会或者不会影响我使用vue吗?如果真的是使用原生的话,需要这种功能吗?如果使用vue的话,需要知道吗?但是很多面试官还是会问,所以这里我还是给大家写一下,其实没有想象的那么的难!

简单的分析一波

所谓的双向绑定就是这边输入数据的时候,另一个dom节点可以时刻监听到这个数据的变化,并且做出相应的操作,最简单的操作就是输入什么就显示什么,这个是怎么实现的呢?我们使用构造器Object的一个方法属性就行,它具有改变一个对象原有值的一个特性,所以这里是可以直接进行改变的,那么我们改变以后,监听的是用户的输入操作,也就是onkeyup的操作,这个时候将onkeyup操作下的值给到上面需要显示的值即可!源码如下:

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" id="B"></input><br />
    <span id="S">{{textModel}}</span>
    <script>
        let mod = {}
        Object.defineProperty(mod, 'textModel', {
            set: function (arg) {
                document.getElementById('S').innerHTML = arg
                document.getElementById('B').value = arg
            }
        })
        document.getElementById('B').onkeyup = function (params) {
            console.log(mod)
            mod.textModel = params.target.value
        }
        mod.textModel = ""
    </script>
</body>

</html>

效果

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021/07/15 ,如有侵权请联系 cloudcommunity@tencent.com 删除
目录
  • 写在前面
  • 简单的分析一波
  • 效果
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档