Uniapp计算属性的使用

在Uniapp中，可以使用计算属性来根据已有的数据计算出新的数据。本文将介绍如在app中使用计算属性，并提供两个示例说明。

基本语法

计算属性是一个函数，它接收当前组件的数据对象作为参数，并返回一个新的数据对象。计算属性的基本语法如下：

computed: {
  propertyName: function() {
    // 计算并返回新的数据对象
  }
}

在上面的代码中，propertyName是计算属性的名称，function()是计算属性的函数体。

示例一：计算商品价

以下是一个示例，演示如何使用计算属性计算商品总价：

<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <p>{{ item.name }}</p>
      <p>{{ item.price }}</p>
    </div>
    <p>Total Price: {{ totalPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: 'Product A', price: 10 },
        { name: 'Product B', price: 20 },
        { name: 'Product C', price: 30 }
      ]
    }
  },
  computed: {
    totalPrice: function() {
      let sum = 0;
      for (let i = 0; i < this.items.length; i++) {
        sum += this.items[i].price;
      }
      return sum;
    }
  }
}
</script>

在上面的代码中，首先定义了一个商品列表items，包括商品名称和价格。然后使用v-for指令遍历商品列表，并显示商品名称和价格。最后，使用计算属性totalPrice计算商品总价，并显示在上。

示例二：计算过滤后的列表

以下一个示例，演示如何使用计算属性计算过滤后的列表：

<template>
  <div>
    <input type="text" v-model="keyword">
    <ul>
      <li v-for="(item, index) in filteredItems" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Apple', 'Banana', 'Orange', 'Pear'],
      keyword: ''
    }
  },
  computed: {
    filteredItems: function() {
      return this.items.filter(item => item.includes(this.keyword));
    }
  }
}
</script>

在上面的代码中，首先定义了一个水果列表items，然后使用v-for指令遍历水果列表，并显示水果名称。接着，使用v-model指令绑定输入框，于输入过滤关键字。最后，使用计算属性filteredItems计算过滤后的水果列表，并显示在页面上。

总结

本文介绍了如何在Uniapp中使用计算属性，并提供了两个示例说明。使用计算属性，可以根据已有的数据计算出新的数据，并在页面上显示。在实际开发中，可以根据需要编不同的计算属性，以实现复杂的数据计算。