计算属性computed

什么是计算属性? 它类似于方法

在页面上直接使用 {{ 属性}}

需求：大于1000 显示1kg 小于 1000 显示 g为单位

<template>
	<view class="content">
		<view class="box">
			{{weight?(weight/1000) +'kg':weight+'g'}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				weight:1200
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
.box{
	font-size: 100rpx;
	color: red;
}
</style>

但是在页面上写逻辑代码不方便我们团队去维护

<template>
	<view class="content">
		<view class="box">
			<!-- {{weight?(weight/1000) +'kg':weight+'g'}} -->
			{{jxWeight}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// weight:1200,
				weight:500
			}
		},
		computed:{
			jxWeight(){
				return  this.weight >= 1000?(this.weight/1000) +'kg':this.weight+'g'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
.box{
	font-size: 100rpx;
	color: red;
}
</style>

计算属性还有两个使用小技巧容易被忽略：一个是计算属性可以依赖其他计算属性；一个是计算属性不仅可以依赖当前vue实例，还可以依赖其他实例的数据！