vue之侦听器

最新推荐文章于 2025-06-11 17:31:10 发布

Volcano_WQL

最新推荐文章于 2025-06-11 17:31:10 发布

阅读量200

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue.js自学笔记文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_45614713/article/details/105466745

Vue.js自学笔记专栏收录该内容

12 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>侦听器</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        {{msg}}
        <hr>
        {{reverseMsg}}
    </div>

    <script>
        var app=new Vue({
            el:"#app",
            data:{
                msg:"hello Vue"
            },
            computed:{//颠倒msg
                reverseMsg:{//使修改reverseMsg的时候，msg也发生修改
                    get:function () {//get
                        return this.msg.split("").reverse().join("")
                    },
                    set:function(value){//set
                        console.log(value)
                        this.msg=value.split("").reverse().join("")
                    }
                }
            },
            //watch监听:监听数据改变，不宜使用太多
            watch:{
                msg:function (val) {
                    console.log("监听事件---msg")
                    console.log(val)
                }
            }
        })
    </script>
</body>
</html>