ICode9

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

Vue-计算属性

2022-09-05 23:30:09  阅读:167  来源: 互联网

标签:Vue computed getAge age getFullYear 计算 birth new 属性


计算属性

  把computed中的方法当做属性使用,会返回一个数据供使用

<div id="app">
			<p>{{msg}}</p>
			<p>方法获取的年龄:{{getAge()}}</p>
			<p>计算属性获取的年龄:{{getAge_computed}}</p>
			<button @click="change">改变birth的值看看年龄变不变</button>
		</div>
new Vue({
				el: "#app",
				data: {
					msg: "hello",
					birth: "1995-02-03"
				},
				methods: {
					getAge() {
						var age = new Date().getFullYear() - new Date(this.birth).getFullYear()
						return age + "岁"
					},
					change() {
						this.birth = "1996-02-03"
					}
				},
				computed:{
                   //计算属性第一种用法
					getAge_computed(){
						var age = new Date().getFullYear() - new Date(this.birth).getFullYear()
						return age + "岁"
					}
					//计算属性第二种用法
					xx:{
						set(oldvalue){},
						get(){}
					}
				}
			})

  

标签:Vue,computed,getAge,age,getFullYear,计算,birth,new,属性
来源: https://www.cnblogs.com/forever-ljf/p/16660061.html

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

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

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

ICode9版权所有