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. 【转载】OpenSSL 提取 pfx 数字证书公钥与私钥

    转自https://www.cnblogs.com/Irving/p/9551110.html OpenSSL 提取 pfx 数字证书公钥与私钥   由于之前生产环境已经使用了 Identityser ...

  2. menuStrip1动态添加菜单及快捷键

    public partial class FormMkTest : Form { public FormMkTest() { InitializeComponent(); } private void ...

  3. About Why Inline Member Function Should Defined in The Header File

    About why inline member function should defined in the header file. It is legal to specify inline on ...

  4. unity3d优化-代码篇(不定期更新)

    1.Update 大多数情况是需要在update中处理很多逻辑的,然而unity3d底层是c/c++编写,逻辑层是c#,通过monobehaviour挂载于对象中,实现一些unity3d接口的重载. ...

  5. Django----将列表按照一定的顺序展示

    1.要求:按照文章的时间降序排列,并且只展示前5篇文章 2.需要用到:list的切片知识 ###改造view.py中的视图方法 #列表页 def get_article(request): artic ...

  6. python购物车-基础版本

    # 1. 用户先给自己的账户充钱:比如先充3000元.# 2. 页面显示 序号 + 商品名称 + 商品价格,如:# 1 电脑 1999# 2 鼠标 10# …# n 购物车结算# 3. 用户输入选择的 ...

  7. 把我坑惨的一个update语句

    最近好几次有开发同学在问我,比如下图: 问题归纳起来就是:在MySQL里面update一条记录,语法都正确的,但记录并没有被更新... 刚遇到这个问题的时候,我拿到这条语句直接在测试库里面执行了一把, ...

  8. 2018-2019-1 20189201 《LInux内核原理与分析》第九周作业

    那一天我二十一岁,在我一生的黄金时代.我有好多奢望.我想爱,想吃,还想在一瞬间变成天上半明半暗的云.那一年我二十一岁,在我一生的黄金时代.我有好多想法.我思索,想象,我不知该如何行动,我想知道一个城市 ...

  9. Python之tkinter:调用python库的tkinter带你进入GUI世界(一)——Jason niu

    #tkinter应用案例五:Label组件设图片为背景并点击按钮触发事件 from tkinter import * from PIL.ImageTk import PhotoImage from s ...

  10. python: 列表的方法

    操作 函数 使用方法 备注 索引 index in: example.index(‘creative’) --- 1 in:example[1,] --- [’creative’, [’京东’,996 ...