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