uni-app 计算属性

• 过滤/加工 data
• 通过computed来计算属性

computed: {
	// 过滤
	filterList() {
		return this.list.filter(v => v.id >=5 );
	},
	
	// 加工
	processList() {
		return this.list.map(v => {
			v.color = "red";
			
			return v;
		});
	}
}

Demo

<template>
	<view class="content">
		<!-- 计算属性 -->
		<view>${
   
   {money}}</view>
		<view>${
   
   {usMoney}}</view>

		<!-- 过滤 -->
		<view>
			<view
				v-for="item in filterList"
				:key="item.id"
			>
			{
   
   {item.text}}
			</view>
		</view>
		
		<view
			v-for="(item,index) in list" # 固定格式写法，index默认可省去
			:key = "item.id" #冒号必须有，key绑定的值必须唯一
			v-if="item.id <= 0"
		>
			{
   
   {item.id}} --- {
   
   {item.text}} ---- {
   
   {index}}
		</view>
	</view>
</template>

<script>
	export default {
		// 1. define data
		data() {
			return {
				// store data
				money:1000, // Number
				list: [
					{
						id: 0,
						text: "test00"
					},
					{
						id: 1,
						text: "test01"
					},
					{
						id: 2,
						text: "test02"
					}
				]
				
			}
		},
		
		computed: {
			usMoney() { // 将usMoney看成是data中的普通数据来使用
				// 格式：$100
				return "$" + this.money;
			},
			filterList() { // 过滤数组
				return this.list.filter(v => v.id <= 0); // id > 0时不显示
			}
		
		}
	}
</script>

使用filterList优于使用v-if/v-for