Vue 中计算属性的 setter 和 getter

2019-02-11 admin

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

<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也就跟着变了。

[转载]原文链接:https://segmentfault.com/a/1190000018120274

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-53534.html

文章标题:Vue 中计算属性的 setter 和 getter

相关文章
vue+element-ui+slot-scope实现可编辑表格
1.咱开发拿到需求大多数是去网上找成型的组件,找不到再看原生的方法能否实现,大牛除外哈,大牛一般喜欢封装组件框架。 2.可编辑表格在后台管理系统还是比较常用的,因为比较流行框架element,iview都没有这个应用,所以考虑了两种方法,下...
2017-12-25
css布局的各种FC简单介绍:BFC,IFC,GFC,FFC
什么是FC? Formatting Context,格式化上下文,指页面中一个渲染区域,拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素的相互关系和作用。 BFC 什么是BFC Block Formatting Context,块...
2018-05-17
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
请前往任务中心完善资料即可激活会员
登录后,点击右上角的用户名,在下拉菜单中可以进去“我的任务” 注册自动激活,本站没有VIP!没有充值!没有推广任务等等 回复即可下载 ...
2015-11-18
Android中Okhttp3实现上传多张图片同时传递参数
之前上传图片都是直接将图片转化为io流传给服务器,没有用框架传图片。 最近做项目,打算换个方法上传图片。 Android发展到现在,Okhttp显得越来越重要,所以,这次我选择用Okhttp上传图片。 Okhttp目前已经更新到Okhttp...
2017-03-17
JavaScript实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如...
2017-03-17
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
回到顶部