Vue 中计算属性的 setter 和 getter

栏目: JavaScript · 发布时间: 5年前

内容简介:计算属性其实是非常强大的,这一节深入的学习下计算属性,先看一段代码:插值表达式计算属性中的

计算属性其实是非常强大的,这一节深入的学习下计算属性,先看一段代码:

<div id="app">
    {{fullName}}
</div>
let vm = new Vue({
    el: '#app',
    data: {
        firstName: 'Dell',
        lastName: 'Lee'
    },
    computed: {
        fullName(){
            return this.firstName + ' ' + this.lastName
        }
    }
})

插值表达式 {{fullName}} 首先回去 data 中去找 fullName 这个属性,找不到再去计算属性中去找,找到之后在将它显示在页面之中。

计算属性中的 fullName 我们换一种写法:

<div id="app">
    {{fullName}}
</div>
let vm = new Vue({
    el: '#app',
    data: {
        firstName: 'Dell',
        lastName: 'Lee'
    },
    computed: {
        fullName:{
            get(){
                return this.firstName + ' ' + this.lastName
            },
            set(value){
                var arr = value.split(' ')
                this.firstName = arr[0]
                this.lastName = arr[1]
            }
        }
    }
})

当我去使用这个计算属性的时候,调用插值表达式,去读这个内容,它就会走 get 的方法

当我去设置这个属性属性值的时候, set 方法会被执行,同时会拿到设置的这个值,我就可以通过这个值去设置 firstNamelastName

computed 有这样一个特性,它呢什么时候会重新计算,当它依赖的值发生变化时,它就会重新去计算 ,重新计算之后,那么你看,当你 set fullName 时, this.firstName 的值就会发生变化,恰好这个值又是 fullName 所依赖的一个值,所以就会引起 fullName 的重新计算,重新计算之后, fullName 的值变了,页面上显示的 fullName 也就跟着变了。


以上所述就是小编给大家介绍的《Vue 中计算属性的 setter 和 getter》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

数据结构与算法分析

数据结构与算法分析

[美]Mark Allen Weiss / 张怀勇 / 人民邮电出版社 / 2007年 / 49.00元

《数据结构与算法分析:C++描述(第3版)》是数据结构和算法分析的经典教材,书中使用主流的程序设计语言C++作为具体的实现语言。书的内容包括表、栈、队列、树、散列表、优先队列、排序、不相交集算法、图论算法、算法分析、算法设计、摊还分析、查找树算法、k-d树和配对堆等。《数据结构与算法分析:C++描述(第3版)》适合作为计算机相关专业本科生的数据结构课程和研究生算法分析课程的教材。本科生的数据结构课......一起来看看 《数据结构与算法分析》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具