computed计算属性

计算属性的基本使用

<template>
  <div id="app">
    <h2>{{name}}</h2>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      firstname: '张',
      lastname: '小明'
    }
  },
  computed: {
    name() {
      return this.firstname + this.lastname
    }
  }
}
</script>

计算属性的复杂使用

<template>
  <div id="app">
    <ul>
      <li v-for="item in goods">{{item}}</li>
    </ul>
    <h2>总价格：{{total}}</h2>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      goods: [
        {id: 101, name: '上衣', price: 100},
        {id: 102, name: '连衣裙', price: 200},
        {id: 103, name: '裤子', price: 80}
      ]
    }
  },
  computed: {
    total() {  //命名一般为名词
      let result = 0
      for(let good of this.goods) {
        result += good.price 
      }
      return '¥'+result
    }
  }
}
</script>

运行效果

computed可对计算结果进行缓存，相较于methods，性能更高