Vue.js 实现简易购物车（商品的增加删除，价格的小计和总计）

使用方法 ：

1. toFixed(2) 保留俩位小数
2. splice(index,howmany) 删除商品 index 规定添加删除的位置 ，howmany 删除几个
3. border-collapse: collapse; 边界折叠： 折叠
4. border-spacing: 0; 边框间距 0
5. 添加 disabled 将按钮在某一条件下固定（如数量小于1时，将不能执行按钮点击操作 通过 :disabled=‘item.count===1’ 将按钮锁定）
6. v-for v-else v-bind @click 的使用
7. 使用 forEach( e=>{ } ) 遍历数组
8. 使用高阶函数 reduce（）来计算总价

1. html 代码

<div id="app">
    <div v-if='books.length'>
      <table>
        <thead>
          <th></th>
          <th>书籍名称</th>
          <th>出版日期</th>
          <th>价格</th>
          <th>购买数量</th>
          <th>操作</th>
        </thead>
        <tbody>
          <tr v-for='(item,index) in books' :key='item.id'>
            <td>{{index+1}}</td>
            <td>{{item.name}}</td>
            <td>{{item.date}}</td>
            <td>{{item.price*item.count|showPrice}}</td>
            <!-- 点击 + - 按钮 进行数量的加减 -->
            <td>
              <button @click="decrement(index)" :disabled='item.count===1'>-</button>
              {{item.count}}
              <button @click="increment(index)">+</button>
            </td>
            <td><button @click='haddleRemove(index)'>删除</button></td>
          </tr>
        </tbody>
      </table>
      <h4> 共 {{totalCount}} 件商品 总价: {{totalPrice|showPrice}} </h4>
    </div>
    <div v-else>购物车已经空啦!</div>
  </div>

2. 引入js和css文件（js文件在body里引入 ，css文件在head里面引入）

<script src="../js/vue.js"></script>
 <script src="./main.js"></script>

<link rel="stylesheet" href="./index.css">

3. css 样式代码：

table{
  border: 1px solid #e9e9e9;
  border-collapse: collapse;
  border-spacing: 0;
}
th,td {
  padding: 8px 16px;
  border: 1px solid #e9e9e9;
  text-align: left;
}
th{
  background-color: #f7f7f7;
  color: #5c6b77;
  font-weight: 600;
}

4. js 代码

const app = new Vue({
  el: '#app',
  data: {

    books: [
      {
        id: 1,
        name: '《算法导论》',
        date: '2006-9',
        price: 85.00,
        count: 1
      },
      {
        id: 2,
        name: '《UNIX编程艺术》',
        date: '2006-2',
        price: 59.00,
        count: 1
      },
      {
        id: 3,
        name: '《编程珠玑》',
        date: '2008-10',
        price: 39.00,
        count: 1
      },
      {
        id: 4,
        name: '《代码大全》',
        date: '2006-3',
        price: 128.00,
        count: 1
      },
    ]
  },
  methods: {
    increment(index) {
      this.books[index].count++
    },
    decrement(index) {
      this.books[index].count--
     
    },
    haddleRemove(index) {
      // 使用 splice(index,howmany) 方法来删除
      // index 规定添加删除的位置 howmany 删除几个
      this.books.splice(index, 1)
    },
  },
  computed: {
    totalPrice() {
      let total = 0
      for (let i = 0; i < this.books.length; i++) {
        total += this.books[i].price * this.books[i].count
      }
      return total
    },
    totalCount() {
      let count = 0
      for (let i = 0; i < this.books.length; i++) {
        count += this.books[i].count
      }
      return count
    }
  },
  filters: {
    showPrice(value) {
      return '￥' + value.toFixed(2)
    }
  }
})

5. 效果图：
   

注： 小技巧 使用{{item.price*item.count}} 来计算单个商品的总价并显示在页面中

6. 遍历数组的完善 （下面的for循环过于繁杂 遍历的方法还有 for in for of forEach()） 小tip: 此处改为 forEach 方法：

    totalPrice() {
         let total = 0
         this.books.forEach(e => {
           total += e.price * e.count
         });
         return total
   

   totalCount() {
         let count = 0
         // for (let i = 0; i < this.books.length; i++) {
         //   count += this.books[i].count
         // }
         this.books.forEach(e => { count += e.count })
         return count
       }
    
   

7. 使用高阶函数 reduce（）来计算总价

    reduceTotalPrice() {
         // 5. 利用 reduce 方法
         return this.books.reduce(function (preValue, book) {
           return preValue + book.price * book.count
         }, 0)
   
   

1. reduce 函数的作用：对数组中所有的内容进行汇总 也就是计算数组总的值
2. reduce 函数的使用：
   reduce 第一个参数时是一个回调函数（函数里面有四个参数 total 必填是初始值或计算结束后的返回值 currentValue 必填 是当前元素）
   第二个参数为传递给函数的初始值 可填可不填
3. 语法：
   array.reduce(function(total, currentValue, currentIndex, arr), initialValue)