Vue computed计算属性的使用方法

当我们在Vue项目中需要根据数据的状态改变来计算出一个新的值时，可以使用Vue中的计算属性(computed)。计算属性是一个具有缓存机制的属性,只有当它依赖的数据发生变化时，才会重新计算其值。计算属性的优势在于可以减少模板中的逻辑操作，提高页面渲染效率。

下面是计算属性的使用方法及示例说明：

1.定义计算属性

我们可以在Vue实例中定义一个名为“computedName”的计算属性，这个计算属性会根据数据中num的值计算出一个新的值并返回：

new Vue({
  el: "#app",
  data: {
    num: 2
  },
  computed: {
    computedName: function() {
      return this.num * 2;
    }
  }
});

2.使用计算属性

当我们想要在模板中使用计算属性computedName的值时，只需要在模板中绑定即可。这个例子中，我们使用了插值表达式，展示计算属性computedName的值：

<div id="app">
  <p>{{ computedName }}</p>
</div>

示例1：计算总价

在购物车页面中，我们需要计算购物车中商品的总价。当用户每次添加或删除商品时，购物车的总价需要及时更新。这种情况下，我们可以使用计算属性computed来实现，如下：

new Vue({
  el: "#app",
  data: {
    productList: [
      { name: "商品A", price: 10, count: 2 },
      { name: "商品B", price: 15, count: 3 },
      { name: "商品C", price: 20, count: 1 }
    ]
  },
  computed: {
    totalPrice: function() {
      var totalPrice = 0;
      for (var i = 0; i < this.productList.length; i++) {
        totalPrice +=
          this.productList[i].price * this.productList[i].count;
      }
      return totalPrice;
    }
  }
});

在模板中展示购物车的总价：

<div id="app">
  <p>购物车总价: {{ totalPrice }}</p>
</div>

示例2：筛选列表数据

在一个数据列表中，我们需要显示用户选择的数据项。当用户筛选条件发生变化时，数据列表需要及时更新。这种情况下，我们可以使用计算属性computed来实现，如下：

new Vue({
  el: "#app",
  data: {
    dataList: [
      { name: "数据A", type: "type1" },
      { name: "数据B", type: "type2" },
      { name: "数据C", type: "type1" },
      { name: "数据D", type: "type3" }
    ],
    selectedType: "type1"
  },
  computed: {
    filteredDataList: function() {
      return this.dataList.filter(function(data) {
        return data.type === this.selectedType;
      });
    }
  }
});

在模板中展示筛选后的数据列表：

<div id="app">
  <select v-model="selectedType">
    <option value="type1">类型1</option>
    <option value="type2">类型2</option>
    <option value="type3">类型3</option>
  </select>

  <ul>
    <li v-for="data in filteredDataList">{{ data.name }}</li>
  </ul>
</div>

以上是关于Vue计算属性的使用方法的完整攻略及示例说明。通过使用计算属性，可以简化Vue项目中的模板逻辑，并提高页面渲染效率。