跟着coderwhy老师做的vue购物车小案例

效果图：

学习的话肯定是一步一步敲下去，先把table的结构给写出来

<table>
    <thead>
        <tr>
            <th>th>
            <th>书籍名称th>
            <th>出版日期th>
            <th>价格th>
            <th>购买数量th>
            <th>操作th>
        tr>
    thead>
    <tbody>
        <tr>
            <td>{{item.id}}td>
            <td>{{item.name}}td>
            <td>{{item.time}}td>
            <td>{{item.price}}td>
            <td><button >-button>{{item.count}}<button>+button>td>
            <td><button>移除button>td>
        tr>
    tbody>
table>
<div>
    <h2>总价格：{{totalPrice}}h2>
div>

css

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

界面基本上就摆好啦。 下面创建好Vue实例，先把数据集填一下。vuejs先引起来

<script src="../js/vue.js">script>
<script>
  new Vue({
    el: '#app',
    data: {
      books: [
        {
          id: 1,
          name: '算法导论',
          time: '2006-9',
          price: 85.00,
          count: 1
        },
        {
          id: 2,
          name: 'UNIX编程艺术',
          time: '2006-2',
          price: 59.00,
          count: 1
        },
        {
          id: 3,
          name: '编程珠玑',
          time: '2008-10',
          price: 39.00,
          count: 1
        },
        {
          id: 4,
          name: '代码大全',
          time: '2006-6',
          price: 85.00,
          count: 1
        }
      ]
    }
  })
script>

数据有了，接下来可以回到tbody里面迭代渲染数据了

<tbody>
    <tr v-for="(item, index) in books" :key="index">
        <td>{{item.id}}td>
        <td>{{item.name}}td>
        <td>{{item.time}}td>
        <td>{{item.price}}td>
        <td><button >-button>{{item.count}}<button>+button>td>
        <td><button>移除button>td>
    tr>
tbody>

界面渲染现在也做好了。下面实现核心功能——价格给个符号和拓展到小数点后两位、购买数量的加减、移除按钮、总价格计算。下面我们一一实现

价格给个符号和拓展到小数点后两位

很明显我们要改的地方就在item.price的渲染，如何把数据来处理，pink老师介绍了两个方法。

{{item.price}}

方法一：

​ 用方法直接return一个新值

methods: {
  getFinalPrice(price) {
    return "￥" + price.toFixed(2);
  }
},

渲染就可以这样写，把price传入函数直接返回新结果

<td>{{getFinalPrice(item.price)}}td>

方法二：

​ 使用过滤器

filters: {
  showPrice(price) {
    return "￥" + price.toFixed(2);
  }
}

渲染写过滤器的写法

<td>{{item.price | showPrice}}td>

价格这样就改过来啦。

购买数量的加减

过程：给加减按钮写增函数和减函数，减的时候要制约1的时候不能再减

methods: {
  increment(index) {
      this.books[index].count++
  },
  decrement(index) {
      this.books[index].count--
  }
},

<td><button @click="decrement(index)" v-bind:disabled="item.count <= 1">-button>{{item.count}}<button @click="increment(index)">+button>td>

移除按钮

传入该行的index，用数组splice方法去掉books数组的index项。

methods: {
  remove(index) {
    this.books.splice(index,1)
  },
  increment(index) {
    this.books[index].count++
  },
  decrement(index) {
    this.books[index].count--
   }
},

<td><button @click="remove(index)">移除button>td>

总价格计算

顾名思义，这时候要使用到计算属性，难点就在于计算属性你不知道什么时候该使用，因为价格要实时更改计算的，我们就写计算属性里面去。

computed: {
  totalPrice() {
	let sum = 0;
	for(let i = 0; i < this.books.length; i++) {
	  sum += this.books[i].price * this.books[i].count;
    }
	  return sum;
  }
},

<h2>总价格：{{totalPrice}}h2>

这样就把整个购物车复刻了一遍啦！有很多写法可以换成js高阶函数，比如计算属性使用函数式编程，灵活使用filter、map、和reduce，改进就由你们来自由发挥啦，结合案例学习的确更为深刻，方法可以灵活地组合使用，这也是一种全面的复习，多的不说了，继续冲啊！！