vue学习(六) computed的get和set方法

最新推荐文章于 2023-04-27 13:26:44 发布

原创最新推荐文章于 2023-04-27 13:26:44 发布 · 234 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue学习

vue学习专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一个使用Vue.js计算属性的示例，展示了如何在前端应用中动态组合和更新数据。通过设置app.fullname，可以实时看到页面上数据的变化。

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

1，测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">{{fullname}}</div>

    <script>
        var app=new Vue({
            el:"#app",
            data:{
                firstname:'hello',
                secondname:'vue'
            },
           computed:{
                fullname: {
                    get:function () {
                        return this.firstname+"---"+this.secondname;
                    },
                    set:function (value) {
                        var arr=value.split("---");
                        this.firstname=arr[0]
                        this.secondname=arr[1]
                    }
                }
            }
        })
    </script>
</body>
</html>

2，在浏览器控制台设置 app.fullname='12345677---hshhshs'，可以看到浏览器上面的数据发现变化