Vue中的计算属性的setter和getter

//如上,fullName这个方法在取这个数据的时候,会执行get中的方法;而在设置数据时,会执行set中的方法。其中set中有个参数(value),用于传参改值,设置了value的值,set中就会接受的到这个值。

//set用法:通过设置一个值来改变它相关联的值,而改变了它相关联的值之后,又会引起fullName值的重新计算,页面也就跟着变化了

//27行代码的用法:引入一个arr值,用于打散value中传来的参数,把它变成数组,分别赋值给firstName和lastName,间接的改变firstName和lastName的值。    

如下图:

//computed有个特性:当它依赖的值发生变化的时候,他就会重新的计算、更新。

//即:当你set fullName的时候,this.firstName的值发生变化,恰好这个值又是fullName所依赖的一个值,所以就会引起fullName的重新计算,重新计算后,fullName变了,页面上显示的fullName也发生变化了

//所以现在,在打印firstName和lastName的值,两个值都发生变化了。  如下图:

3-4 计算属性的setter和getter的更多相关文章

  1. vue 计算属性的setter getter

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. Vuejs——(3)计算属性,样式和类绑定

    版权声明:出处http://blog.csdn.net/qq20004604   目录(?)[+]   先上总结: (十九)标签和API总结(2) vm指new Vue获取的实例 ①当dom标签里的值 ...

  3. Vue学习笔记:计算属性

    使用函数的缺点 如果我们想要将数据经过转化后再显示,或者多个数据结合起来进行显示,一般可以直接在数据渲染或者数据绑定的时候书写表达式 如果表达式过于复杂,或者逻辑太多的时候,我们可以将其封装在函数里, ...

  4. Vue学习笔记(二)动态绑定、计算属性和事件监听

    目录 一.为属性绑定变量 1. v-bind的基本使用 2. v-bind动态绑定class(对象语法) 3. v-bind动态绑定class(数组语法) 4. v-bind动态绑定style(对象语 ...

  5. Swift面向对象基础(中)——Swift中的存储属性和计算属性

    学习来自<极客学院> 1.存储属性:存储在类.结构体里的变量或者常量 2.分为:实例存储属性.类型存储属性 3.所有的存储属性必须显示的指定初始值,在定义时或者构造器当中指定 4.可选类型 ...

  6. Swift计算属性

    除存储属性外,类.结构体和枚举可以定义计算属性,计算属性不直接存储值,而是提供一个 getter 来获取值,一个可选的 setter 来间接设置其他属性或变量的值. struct Point { va ...

  7. Swift—计算属性-备

    计算属性本身不存储数据,而是从其他存储属性中计算得到数据. 计算属性概念: 计算属性提供了一个getter(取值访问器)来获取值,以及一个可选的setter(设置访问器)来间接设置其他属性或变量的值. ...

  8. Swift编程语言学习9—— 存储属性和计算属性

    属性将值跟特定的类.结构或枚举关联.存储属性存储常量或变量作为实例的一部分,计算属性计算(而不是存储)一个值.计算属性能够用于类.结构体和枚举里,存储属性仅仅能用于类和结构体. 存储属性和计算属性通经 ...

  9. 【Vue】浅谈Vue(一):从模板语法数据绑定、指令到计算属性

    写在前面 今年前端届比较有意思,从大漠穷秋发表文章比较angular和vue,继而致歉vue作者.社区,从谷歌辞去Angular Developer PM in China一职并且呼吁大家停止各种无谓 ...

随机推荐

  1. kityminder-editor + MongoDB 思维导图数据自动实时保存方案

    最近开始做自己的第一个开源项目:一个基于思维导图的测试用例管理系统MinderCase,在做了一周的技术调研后,决定采用kityminder-editor作为思维导图编辑器,为了支持实时存储,当思维导 ...

  2. Extjs6.2 项目学习系列(一)

     1. Extjs开发准备  (1).下载ExtJS  SDK GPL版 (本测试用版本 ext-6.2.0) : https://www.sencha.com/legal/gpl/ (2).下载Se ...

  3. android studio 虚拟机adb.exe已停止工作的处理

    在搭建完android studio 后使用虚拟机或真机调试程序,出现如下错误.   在运行里输入cmd,打开命令行工具,使用netstat -aon|findstr 5037查看adb.exe的50 ...

  4. DS博客作业01—日期抽象数据类型设计与实现

    1.本章学习总结 1.1 思维导图 1.2学习体会 开学就来了个大作业,还要求用的是c++语法,作为一个只听过没学过的未知语法,靠着CSDN和寝室大佬的帮助下渐渐地了解了一些c++的使用,现在也可以使 ...

  5. C语言--第五次作业--指针

    1.本章学习总结 1.1 思维导图 1.2本章学习体会及代码量学习体会 1.2.1学习体会 没想到都已经学习完C语言的灵魂-指针的内容了(当然也是C里面最难学习的内容了).虽然在之前就有听学习进度比较 ...

  6. Android进阶:二、从源码角度看透 HandlerThread 和 IntentService 本质

    上篇文章我们讲日志的存储策略的时候用到了HandlerThread,它适合处理"多而小的任务"的耗时任务的时候,避免产生太多线程影响性能,那这个HandlerThread的原理到底 ...

  7. webserver开发

    https://www.cnblogs.com/zakun/p/5387910.html

  8. Mysql学习笔记03

    Mysql 的视图 1  view  在查询中,我们经常把查询结果当成临时表来看, view 是什么? View 可以看成一张虚拟的表,是表通过某种运算得到的有一个投影. 2 如何创建视图? 创建视图 ...

  9. Android 动画 (1) 基础

    背景 坑, 最近打算在recyclerview item上加一个带动画的button,结果button无法连续点击,还以为是动画是同步的,必须要结束之后才能开始另一个动画,后来去掉recylervie ...

  10. REM——适合移动开发的自适应方案

    文章目录 1.什么是REM 2.REM和EM的区别 3.手机端方案的特点 4.使用JS动态调整REM 5.REM与其他单位同时存在 1.什么是REM 先来认识几个常见单位: px:像素,这个大家都知道 ...