计算属性的setter与getter

〆﹏为你伏笔

已于 2022-05-26 10:26:06 修改

阅读量1.1k

点赞数

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

于 2022-05-23 20:11:17 首次发布

本文链接：https://blog.csdn.net/Q2159621453/article/details/124933799

版权

vue 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

1、每一个计算属性都包含一个 getter与setter.

2、计算属性会默认使用getter函数，setter函数并不常用，所以一般计算属性setter与getter都不写

3、setter函数内的形参是你修改的值。

<body>
    <div id="app">
        <h2>{{fullName}}</h2>
    </div>

    <script>
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    firstName: "张",
                    lastName: "飞"
                }
            },
            computed: {
                /* fullName(){
                    return this.firstName + " " + this.lastName;
                } */
                fullName: {
                    get() {
                        return this.firstName + " " + this.lastName;
                    },
                    set(value) {
                        let arr = value.split(" ");
                        this.firstName = arr[0];
                        this.lastName = arr[1];
                    }
                }
            }
        })
    </script>
</body>

计算属性内的方法会在vue的实例对象上。通过实例对象的setter与getter，获得与更改_data的数据。(获得什么数据与你写的setter与getter有关)。

〆﹏为你伏笔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
计算属性的setter与getter

1、每一个计算属性都包含一个 getter与setter.2、计算属性会默认使用getter函数，setter函数并不常用，所以一般计算属性setter与getter都没有3、setter函数内的形参是你修改的值。<body> <div id="app"> <h2>{{fullName}}</h2> </div> <script> const app = new V
复制链接

扫一扫