vue2学习：reduce方法和computed计算属性用法

reduce

reduce可以遍历集合并将集合所有的值汇总为一个。

第一个参数是一个回调函数，函数第一个参数是汇总起来的最终值，默认是集合的第一项，函数第二个参数是集合遍历出来的集合元素；

第二个参数可以指定回调函数中第一个参数汇总值的默认值

computed

computed计算属性可以计算data中的值，并随着data中数据的改变自动重新计算值。

跟data，methods同级，语法跟methods一样，但是不是方法是属性，因此在页面结构中取值是{{方法名}}

案例

<style>
  table {
    border: 1px solid #000;
    text-align: center;
    width: 240px;
  }
  th,td {
    border: 1px solid #000;
  }
  h3 {
    position: relative;
  }
</style>

<div id="app">
  <h3>小黑的礼物清单</h3>
  <table>
    <tr>
      <th>名字</th>
      <th>数量</th>
    </tr>
    <tr v-for="(item, index) in list" :key="item.id">
      <td>{{ item.name }}</td>
      <td>{{ item.num }}个</td>
    </tr>
  </table>

  <!-- 目标：统计求和，求得礼物总数 -->
  <p>礼物总数：{{countTotal}} 个</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      // 现有的数据
      list: [
        { id: 1, name: '篮球', num: 1 },
        { id: 2, name: '玩具', num: 2 },
        { id: 3, name: '铅笔', num: 5 },
      ]
    },
    computed: {
      countTotal() {
        return this.list.reduce((total,item) => {
          return total+item.num;
        },0);
      }
    }
  })
</script>