vue双向数据绑定的实现原理

最新推荐文章于 2024-04-19 17:30:39 发布

gaearon

最新推荐文章于 2024-04-19 17:30:39 发布

阅读量181

点赞数

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

本文链接：https://blog.csdn.net/weixin_45499478/article/details/113065894

版权

Vue 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

双向数据绑定的实现原理

可以使用属性 + 事件来实现双向数据绑定，如下代码所示：

<body>
    <div class="container">
        <input type="text" @input='input' v-bind:value='msg'>
        <button @click='show'>显示值</button>
        <button @click='change'>修改值</button>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '.container',
            data: {
                msg: '123'
            },
            methods: {
                input: function (event) {
                    this.msg = event.target.value;
                },
                show: function () {
                    console.log(this.msg);
                },
                change: function () {
                    this.msg = 'Vue';
                }
            }
        })
    </script>
</body>

结果：
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

gaearon

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue双向数据绑定的实现原理

双向数据绑定的实现原理可以使用属性 + 事件来实现双向数据绑定，如下代码所示：<body> <div class="container"> <input type="text" @input='input' v-bind:value='msg'> <button @click='show'>显示值</button> <button @click='change'>修改值<
复制链接

扫一扫