Vue购物车简单操作，高阶函数

  <div class="hello">
    <div v-if="books.length">
      <table>
        <thead>
          <tr>
            <th></th>
            <th>书籍名称</th>
            <th>出版日期</th>
            <th>价格</th>
            <th>购买数量</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(book,index) in books" :key="index.id">
            <td>{{book.id}}</td>
            <td>{{book.name}}</td>
            <td>{{book.date}}</td>
            <td>{{book.price | fla}}</td>
            <td>
              <button @click="jian(index)" v-bind:disabled="book.count <= 1">-</button>
              {{book.count}}
              <button @click="jia(index)">+</button>
            </td>
            <td>
              <button @click="shan(index)">移除</button>
            </td>
          </tr>
        </tbody>
      </table>
      <h2>总价格：{{num |fla}}</h2>
    </div>
    <h2 v-else>购物车为空</h2>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      disabled: false,
      books: [
        { id: 1, name: "算法导论", date: "2006-9", price: 85.0, count: 1 },
        { id: 2, name: "UNIX编程艺术", date: "2006-2", price: 59.0, count: 1 },
        { id: 3, name: "编程珠玑", date: "2008-12", price: 39.0, count: 1 },
        { id: 4, name: "代码大全", date: "2006-3", price: 128, count: 1 }
      ]
    };
  },
  methods: {
    jian(index) {
      this.books[index].count--;
    },
    jia(index) {
      this.books[index].count++;
      console.log(this.books);
    },
    shan(index) {
      this.books.splice(index, 1);
    }
  },
  computed: {
    num() {
      // 这个是普通的for循环总价格相加
      let num = 0;
      for (let i of this.books) {
        num += i.price * i.count;
      }
      return num;
      // 使用高阶函数把总价格相加
      return this.books.reduce(function(a,books){
        return a + books.price * books.count
      },0)
    }
  },
  filters: {
    fla(a) {
      return "￥" + a.toFixed(2);
    }
  },
  created(){
    // 高阶函数的使用
    let arr = [11,22,33,44,55,66,77,88,99];
    let arr1 = arr.filter(function(n){ //  filter 对比出 小于60的值
       return n < 60
    }).map(function(n){  // 把对比出的值进行 乘以 2
       return n * 2
    }).reduce(function(a,n){ // 把乘以 2 的值进行相加
     return a + n
    },0 )
    
    console.log(arr1);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
table {
  border: 1px solid black;
  border-collapse: collapse;
  border-spacing: 0;
}
th,
td {
  padding: 8px 16px;
  border: 1px solid black;
  text-align: center;
}
th {
  background-color: #f7f7f7;
  color: #5c6b77;
  font-weight: 600;
}
</style>

``