vue08-computed get与set方法

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

一笑而过者也

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

阅读量454

点赞数

分类专栏： Vue 文章标签： vue computed get set

本文链接：https://blog.csdn.net/u012326462/article/details/82821046

版权

Vue 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

上篇博客，只用了computed的get方法，获取计算属性的值。set方法为给计算属性赋值时执行的方法

<!DOCTYPE html>
<html lang=en>

<head>
    <meta charset="utf-8" />
    <title>Hello world</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="root">
        {{fullName}}
    </div>


    <script>
        var vm = new Vue({
            el: "#root",
            data: {
                firstName: "xu",
                lastName: "haixing"
            },
            computed: {
                fullName: {
                    get: function () {
                        return this.firstName + " " + this.lastName;
                    },
                    set: function (value) {
                        var arr = value.split(" ");
                        this.firstName = arr[0];
                        this.lastName = arr[1];
                        console.log("value" + value);
                    }
                }
            }
        })

    </script>
</body>

</html>

例子中，firstName与lastName改变会计算fullName值，fullName改变也会计算fistName与lastName值。看演示效果：

一笑而过者也

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue08-computed get与set方法

上篇博客，只用了computed的get方法，获取计算属性的值。set方法为给计算属性赋值时执行的方法&lt;!DOCTYPE html&gt;&lt;html lang=en&gt;&lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;Hello world&lt;/title&gt; &
复制链接

扫一扫

专栏目录