Vue 计算属性

最新推荐文章于 2024-07-19 18:41:59 发布

成虚员

最新推荐文章于 2024-07-19 18:41:59 发布

阅读量40

点赞数 1

分类专栏： vue 文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/m0_48546501/article/details/130156121

版权

vue 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

Vue 计算属性

定义：要用的属性不存在，要通过已有的属性计算得来
原理：底层借助了Object.defineproperty方法提供的getter和setter
内部有缓存机制

<script>
	new Vue({
		el:"#root",
		data:{
			firstName:'张',
			lastName:'三'
		},
		computed:{
			fullName:{
				//get有什么用？
				//当有人读取fullName时，get就会被调用，返回值作为fullName的值
				//get什么时候被调用？
				//1.初次读取fullName时 2.所依赖的数据发生变化时
				get(){
					return this.firstName + '-' + this.lastName
				},
				//set什么时候被调用？
				//当fullName被修改时
				set(value){
					const arr = value.split('-')
					this.firstName = arr[0]
					this.lastName = arr[1]
				}
			}
		}
	})
</script>

计算属性简写（只考虑读取数据，不考虑修改数据才可以使用简写）

<script>
	new Vue({
		el:"#root",
		data:{
			firstName:'张',
			lastName:'三'
		},
		computed:{
			fullName(){
				return this.firstName + '-' + this.lastName
			}
		}
	})
</script>