v-model原理

过往未来。

于 2021-10-20 11:30:12 发布

阅读量102

点赞数

文章标签： javascript html5 html vue.js

本文链接：https://blog.youkuaiyun.com/fgnja145123/article/details/120862812

版权

这篇博客探讨了JavaScript中对象属性的setter和getter方法，通过实例展示了如何使用它们来改变和获取变量值，并在输入值变化时更新页面显示。同时，还介绍了onchange事件在输入框值改变时触发setter方法的应用。

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

<!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>
    <p id="psp"></p>
    <input type="text" name="ipt" id="ipt">
</body>
<script>
    var psp = document.getElementById('psp')
    var ipt = document.getElementById('ipt')
    var obj = {
        name: 'Hello World'
    }
    psp.innerHTML = obj.name
    ipt.value = obj.name
    Object.defineProperty(obj, 'name', {
        set: function(newname) {
            psp.innerHTML = newname
            console.log('设置name')
        },
        get: function(newname) {
            console.log(newname);
            console.log('获取name')
        }
    })
    ipt.onchange = function() {
        obj.name = ipt.value
            // 注意这的顺序不要设反了
    }
</script>

</html>