ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Vue计算属性相关

2021-08-03 16:32:38  阅读:186  来源: 互联网

标签:Vue firstName get lastName set 计算 fullName 属性


计算属性

插值语法插入有返回值得自定义方法,必须带小括号。

使用计算属性时,插值表达式直接读取使用,如fullName

属性为data中的数据。

计算属性:computed与data同级,对象形式

通过已有属性计算得来

在vm中放的是一个新的属性

get和set都是普通方法

data:{
	firstName:'',
	lastName:''
},
computed:{
	fullName:{
		//有人读取fullName,get被调用,返回值作为fullName的值
        //get在初次读取时或所依赖的数据发生变化时被调用
		get(){
             //此处this为vm
			return this.firstName + '-' +this.lastName
		},
        //set当fullName被修改时调用,不必须,确定计算属性只读不改时,不需要写set方法
        set(value){
            const arr = value.split('-');
            this.firstName = arr[0];
        	this.lastName = arr[1];
        }
	}
}
//简写
fullName(){
	return this.firstName + '-' +this.lastName
}

计算属性会缓存,使用多次时只调用一次,容易调试,提高效率

标签:Vue,firstName,get,lastName,set,计算,fullName,属性
来源: https://blog.csdn.net/Stead_Fast/article/details/119353010

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有