3-4 计算属性的setter和getter
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的更多相关文章
- vue 计算属性的setter getter
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Vuejs——(3)计算属性,样式和类绑定
版权声明:出处http://blog.csdn.net/qq20004604 目录(?)[+] 先上总结: (十九)标签和API总结(2) vm指new Vue获取的实例 ①当dom标签里的值 ...
- Vue学习笔记:计算属性
使用函数的缺点 如果我们想要将数据经过转化后再显示,或者多个数据结合起来进行显示,一般可以直接在数据渲染或者数据绑定的时候书写表达式 如果表达式过于复杂,或者逻辑太多的时候,我们可以将其封装在函数里, ...
- Vue学习笔记(二)动态绑定、计算属性和事件监听
目录 一.为属性绑定变量 1. v-bind的基本使用 2. v-bind动态绑定class(对象语法) 3. v-bind动态绑定class(数组语法) 4. v-bind动态绑定style(对象语 ...
- Swift面向对象基础(中)——Swift中的存储属性和计算属性
学习来自<极客学院> 1.存储属性:存储在类.结构体里的变量或者常量 2.分为:实例存储属性.类型存储属性 3.所有的存储属性必须显示的指定初始值,在定义时或者构造器当中指定 4.可选类型 ...
- Swift计算属性
除存储属性外,类.结构体和枚举可以定义计算属性,计算属性不直接存储值,而是提供一个 getter 来获取值,一个可选的 setter 来间接设置其他属性或变量的值. struct Point { va ...
- Swift—计算属性-备
计算属性本身不存储数据,而是从其他存储属性中计算得到数据. 计算属性概念: 计算属性提供了一个getter(取值访问器)来获取值,以及一个可选的setter(设置访问器)来间接设置其他属性或变量的值. ...
- Swift编程语言学习9—— 存储属性和计算属性
属性将值跟特定的类.结构或枚举关联.存储属性存储常量或变量作为实例的一部分,计算属性计算(而不是存储)一个值.计算属性能够用于类.结构体和枚举里,存储属性仅仅能用于类和结构体. 存储属性和计算属性通经 ...
- 【Vue】浅谈Vue(一):从模板语法数据绑定、指令到计算属性
写在前面 今年前端届比较有意思,从大漠穷秋发表文章比较angular和vue,继而致歉vue作者.社区,从谷歌辞去Angular Developer PM in China一职并且呼吁大家停止各种无谓 ...
随机推荐
- Docker使用docker-compose.yml构建Asp.Net Core和Mysql镜像并与Mysql数据库通信
version: '3' services: mycore01: build: context: . container_name: 'mycore01' #自定义容器名 dockerfile ...
- nginx 将请求全部指向到一个页面
个人需要,所以试写了下,使用的是nginx. 文件目录 --------------------- 作者:z8853797 来源:CSDN 原文:https://blog.csdn.net/z8853 ...
- codeforces / project Euler 泛做
目录 PE 15 PE 76 PE 90 PE 577 PE 97 PE 364(坑) 待做 发现这个题库,很有意思,趁着还没有学习微积分,看不了书,赶快从头开始刷,所以都是一些简单的题目,即时简单, ...
- Node.js 操作 OSX 系统麦克风、扬声器音量
最近几年 Electron 很火,公司也正好有个项目想做跨平台客户端,大家研究了一下就选择了 Electron,第一次做 js 的项目遇到了不少坑,不过也都一点点解决了. 因为项目中需要对用户录音,H ...
- UOJ#373. 【ZJOI2018】线图 搜索,树哈希,动态规划
原文链接www.cnblogs.com/zhouzhendong/p/UOJ373.html 前言 真是一道毒瘤题.UOJ卡常毒瘤++.我卡了1.5h的常数才过QAQ Orzjry 标算居然是指数做法 ...
- SVM 实践步骤
主要公式步骤: 原距离问题的函数: 1.将SVM的距离问题转化为拉格朗日函数: 2.原函数问题化成如下问题: 3.对各非拉格朗日参数求偏导来求min值: 4.将上面 令各偏导等于0 的结果带回 拉 ...
- npm 安装cnpm淘宝镜像时报错解决
详细报错 D:\workspace\es61> npm install -g cnpm --registry=https://registry.npm.taobao.org npm WARN d ...
- 爬虫之图片懒加载技术及js加密
图片懒加载 图片懒加载概念: 图片懒加载是一种网页优化技术.图片作为一种网络资源,在被请求时也与普通静态资源一样,将占用网络资源,而一次性将整个页面的所有图片加载完,将大大增加页面的首屏加载时间.为了 ...
- 展开被 SpringBoot 玩的日子 《 三 》 整合Redis
SpringBoot对常用的数据库支持外,对NoSQL 数据库也进行了封装自动化. redis介绍 Redis是目前业界使用最广泛的内存数据存储.相比memcached,Redis支持更丰富的数据结构 ...
- IntelliJ IDEA部署web项目,Tomcat没有出现Artifacts
解决办法: