v-model原理

最新推荐文章于 2024-02-10 11:24:33 发布

自由的音符

最新推荐文章于 2024-02-10 11:24:33 发布

阅读量97

点赞数

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

本文链接：https://blog.csdn.net/weCat_s/article/details/124929012

版权

Vue 专栏收录该内容

48 篇文章 5 订阅

订阅专栏

demo实现

<!--
 * @Autor: CQJ
 * @Date: 2022-05-23 15:57:22
 * @LastEditors: CQJ
 * @LastEditTime: 2022-05-23 16:01:00
 * @Description: 
-->
<!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>
    <h2>v-model原理</h2>
    <!-- 1.双向绑定数据 -->
    <input type="text" placeholder="请输入名字" id="username">
    显示值：<p id="uname"></p>
    <script>
        let obj = {}
        Object.defineProperty(obj, 'username', {
            //取值
            get: function () {
                console.log('取值');
            },
            set: function (newValue) {
                console.log('设置值');
                document.getElementById('uname').innerHTML = newValue;
            }
        })
        document.getElementById('username').addEventListener('input', function (e) {
            obj.username = e.target.value;
        })
    </script>
</body>

</html>