首页 > 编程学习 > Vue-计算属性

Vue-计算属性

发布时间:2022/9/5 23:26:55

计算属性

  把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(){}
					}
				}
			})

  

Copyright © 2010-2022 mfbz.cn 版权所有 |关于我们| 联系方式|豫ICP备15888888号