vue之侦听器

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

原创最新推荐文章于 2025-06-11 17:31:10 发布 · 200 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

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>