计算属性专题

计算属性最佳实践

<template>
  <div>
    <ul>
      <li v-for="(product, index) in formattedProducts" :key="product.id" :style="getProductStyles(product)">
        {{ product.name }} - Stock: {{ product.stock }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: 'Apple', stock: 10 },
        { id: 2, name: 'Banana', stock: 5 },
        { id: 3, name: 'Cherry', stock: 0 },
        { id: 4, name: 'Date', stock: 20 }
      ]
    };
  },
  computed: {
    formattedProducts() {
      return this.products.map(product => ({
        ...product,
        color: this.getStockColor(product.stock),
        backgroundColor: this.getStockBackgroundColor(product.stock)
      }));
    }
  },
  methods: {
    getProductStyles(product) {
      return {
        color: product.color,
        backgroundColor: product.backgroundColor
      };
    },
    getStockColor(stock) {
      if (stock > 10) {
        return 'green';
      } else if (stock > 0) {
        return 'orange';
      } else {
        return 'red';
      }
    },
    getStockBackgroundColor(stock) {
      if (stock > 10) {
        return '#e0f2e0';
      } else if (stock > 0) {
        return '#f2e0c0';
      } else {
        return '#f2c0c0';
      }
    }
  }
};
</script>