vue中的computed属性

computed初介绍

在Vue中，computed属性是用来处理数据的计算属性。它是一个函数，返回一个值，这个值会被缓存起来，只有依赖的响应式数据发生变化时才会重新计算。

下面是一个简单的例子，演示了如何使用computed属性来计算一个值：

// Vue实例
new Vue({
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: function() {
      return this.firstName + ' ' + this.lastName;
    }
  }
});

在上面的例子中，我们定义了一个computed属性fullName，它通过拼接firstName和lastName来计算一个完整的名字。这个计算属性会自动跟踪firstName和lastName的变化，只要它们发生变化，fullName就会被重新计算。

在模板中，我们可以直接使用fullName这个计算属性：

{{ fullName }}

当firstName或lastName发生变化时，fullName会自动更新，并且在模板中展示最新的完整名字。

除了基本的计算属性，还可以使用computed属性来实现一些更复杂的计算逻辑。比如，可以通过过滤、映射、聚合等操作对数据进行处理，然后返回新的计算属性。

下面是一个更复杂的例子，演示如何使用computed属性来计算一个列表中的偶数元素的和：

// Vue实例
new Vue({
  data: {
    numbers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  },
  computed: {
    evenSum: function() {
      return this.numbers.filter(function(number) {
        return number % 2 === 0;
      }).reduce(function(sum, number) {
        return sum + number;
      }, 0);
    }
  }
});

在上面的例子中，我们定义了一个computed属性evenSum，它通过过滤出偶数元素，并对它们进行求和来计算一个新的值。这个计算属性会自动跟踪numbers的变化，只要它发生变化，evenSum就会被重新计算。

在模板中，我们可以直接使用evenSum这个计算属性：

{{ evenSum }}

当numbers发生变化时，evenSum会自动更新，并且在模板中展示最新的偶数元素的和。

需要注意的是，computed属性是通过缓存机制来提高性能的。当computed属性依赖的响应式数据发生变化时，只有相关的computed属性会被重新计算，而不是每次都重新计算所有的computed属性。这样可以避免不必要的计算，提高页面性能。

computed案例

    
    
    Document
    
#app button{
    margin: 10px;
    display:block ;
}
    


    
        

物品	价格	数量	总价
{{item.name}}	{{item.price}}	{{item.num}}	{{item.price*item.num}}
合计	{{sigletotal}}

物品 价格 数量 添加 new Vue({ el:'#app', data:{ name:'', price:'', num:'', list:[ {name:'苹果',price:2,num:3}, {name:'西瓜',price:4,num:5}, {name:'菠萝',price:4,num:6}, {name:'香蕉',price:1,num:2} ] }, methods:{ add(){ if(this.name==''||this.price==''||this.num==''){ alert('请输入完整信息') return }else if(isNaN(this.price)||isNaN(this.num)){ alert('价格和数量必须为数字') return }else if(this.price