计算属性的setter和getter

        刚才通过计算lastName和firstName获取了整个姓名,当时我们只是通过一直的data对象中属性进行合成的,这个也就是计算属性(computed)的get方法(默认),实质上还有一个set方法,我们来看一下getter和setter;

<div id="app">{{fullName}}</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            lastName:"Make",
            firstName:"Ma",
        },
        computed:{
            fullName:{
                get:function(){
                  return  this.firstName+" "+this.lastName;
                },
                set:function(val){
                    console.log(val)
                    var names=val.split(" ");
                    this.firstName=names[0]
                    this.lastName=names[1]
                }
            }
        }
    })

        get就是通过原有的进行合成,而这个set就是可以将计算属性进行重新赋值,然后set会得到这个val,这个实例是通过重新设置set,然后通过空格(" ")分开,填充到数组中,第一项作为firstName,第二项作为lastName,从而改变data层,视图层随之而变!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

go语言json操作指南

1、Go语言的JSON 库   Go语言自带的JSON转换库为 encoding/json 1.1)其中把对象转换为JSON的方法(函数)为 json.Mar...

44680
来自专栏GopherCoder

『Go 内置库第一季:strconv』

日常编写代码的过程中,字符串和数值型、布尔类型之间的转换算是很频繁了。所以有必要研究下内置的 strconv 库。

10230
来自专栏老马寒门IT

06-老马jQuery教程-jQuery高级

jQuery里面的大部分API都是在jQuery的原型对象上定义的。jQuery源码中对原型对象做了简写的处理。也就是说:jQuery.fn === jQuer...

22800
来自专栏C/C++基础

C#常见转义字符

·一种特殊的字符常量; ·以反斜线"\"开头,后跟一个或几个字符。 ·具有特定的含义,不同于字符原有的意义,故称“转义”字符。 ·主要用来表示那些用一般...

7610
来自专栏Golang语言社区

Go语言实现的排列组合问题实例(n个数中取m个)

本文实例讲述了Go语言实现的排列组合问题。分享给大家供大家参考,具体如下: (一)组合问题 组合是一个基本的数学问题,本程序的目标是输出从n个元素中取m个的所有...

66950
来自专栏技术碎碎念

python3 入门 (二) 列表的使用

列表用于组织其它数值,即写在方括号之间、用逗号分隔开的数值列表。列表内的项目不必全是相同的类型。 列表的定义 1 student = ['Tom', 'Jack...

332100
来自专栏浪淘沙

桶排序的算法

思路:设数组的长度为len,创建三个长度为len+1的(桶)数组。将数组的元素根据大小放在不同的桶中,其中,必定有差值大于一个桶的差存在,故同一个桶中不可能出现...

8720
来自专栏十月梦想

类的传参以及super属性和super对象

在上述例子我们也看到了指定的子类特有的方法直接指定,那么我们如何指定子类特有的属性呢?我们这里用到了super方法;

13620
来自专栏程序生活

Leetcode-Easy 806. Number of Lines To Write String

给一个字符串S,从左到右将它们排列行,每行最大长度为100,,同时给定一个数组withds,widths[0]对应着 a的宽度, widths[1]对应着b的宽...

9420
来自专栏领域驱动设计DDD实战进阶

06-TypeScript中的表达式

TypeScript中提供了箭头表达式,通过箭头表达式可以简化我们的编码。 1.箭头表达式简化匿名函数 在JS中,我们通常使用匿名函数,匿名函数实际上是赋值给一...

29970

扫码关注云+社区

领取腾讯云代金券