vue2.0 computed 计算list循环后累加值的实例

下面就为您详细讲解如何使用 Vue2.0 的 computed 计算属性来实现 list 循环后累加值的功能。

1. 简介

在 Vue.js 中，computed 属性是一种计算属性，它能够基于其它属性的值进行计算，并返回一个计算后的值。本文中将会通过 computed 属性来计算 list 循环后累加值的方法。

2. 实现步骤

2.1 数据源

首先，我们需要一个数据列表，假设该列表为一个数组 list，其中每个元素都有一个叫做 value 的属性，我们需要将每个元素的 value 属性相加，得到所有元素 value 的总和。

data: {
  list: [
    { value: 1 },
    { value: 2 },
    { value: 3 },
    { value: 4 }    
  ]
}

2.2 computed 属性计算

我们可以使用 Vue 中的计算属性来计算元素 value 的值。首先，我们使用 map 方法从 list 中提取出每个元素的 value 属性，得到一个新的数组 listValues。然后，我们使用 reduce 方法对 listValues 进行累加，得到所有元素 value 的总和。

computed: {
  totalValue: function() {
    var listValues = this.list.map(function(item) {
      return item.value;
    });
    var sum = listValues.reduce(function(total, amount) {
      return total + amount;
    });
    return sum;    
  }
}

2.3 计算结果渲染

现在，我们已经得到了所有元素 value 的总和，接下来需要将计算结果渲染到页面上。我们可以在 HTML 中使用插值绑定 {{}} 来绑定计算属性。

<div>Total value: {{ totalValue }}</div>

2.4 示例说明

下面，我们通过两条示例来进一步说明如何使用 computed 属性计算 list 循环后累加值。

2.4.1 示例1：计算购物车中所有商品的价格总和

data: {
  cartItems: [
    { product: 'apple', price: 10 },
    { product: 'banana', price: 20 },
    { product: 'orange', price: 30 },
    { product: 'grape', price: 40 }
  ]
},
computed: {
  totalPrice: function() {
    var prices = this.cartItems.map(function(item) {
      return item.price;
    });
    var sum = prices.reduce(function(total, amount) {
      return total + amount;
    });
    return sum;    
  }
}

<div>Total price: {{ totalPrice }}</div>

2.4.2 示例2：计算学生成绩总和

data: {
  scores: [
    { name: 'Tom', score: 90 },
    { name: 'Jerry', score: 80 },
    { name: 'Mike', score: 70 }
  ]
},
computed: {
  totalScore: function() {
    var scores = this.scores.map(function(item) {
      return item.score;
    });
    var sum = scores.reduce(function(total, amount) {
      return total + amount;
    });
    return sum;    
  }
}

<div>Total score: {{ totalScore }}</div>

3. 总结

本文详细介绍了如何使用 Vue2.0 的 computed 属性来计算 list 循环后累加值的方法，并通过两个示例进行了说明。希望对您有所帮助。