vue2.0实现经典购物车案例

  前段时间听说一段这样这样的话，如何你要快速在一个行业里习得工作的本领，那你的先掌握该领域最核心的20%的技能，根据二八定理，掌握这20%的技能知识你将可以解决该领域80%的问题。

我们都知道学习vue最经典最有代表性的demo就是购物车。今天终于静下心来和大家分享一下自己写的一个购物车的案例。

1.实现效果图如下所示

页面很简单，所有的功能列和展示都是放在一个简单的table里面

2.功能需求

a.商品数量列里面点击加减实现商品数量的加减，或者在输入框中直接输入的时候，金额和总金额也发生改变，

b.点击复选框选项实现单选 点击全选实现全选，点击取消全选实现取消全选，总金额也发生改变

c.点击删除实现删除功能，总金额也发生改变

3.整理代码如下

<template>
  <div id="app">
    <router-view></router-view>
    <table border="1" width="100%" cellspacing="0" height="200px">
      <tr>
        <th ></th>
        <th>商品名称</th>
        <th>商品单价</th>
        <th>商品数量</th>
        <th>金额</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item,index) in cartlist" :key="item.id">
        <td><input type="checkbox" @click="dainji(item,flag)" :checked="item.checked"></td>
        <td>{
    {item.title}}</td>
        <td>{
    {item.price| rounding}}</td>
        <td><button @click="changeNumber(item,false)">-</button><input type="text" :value="item.number" @change="change1($event,item)"><button @click="changeNumber(item,true)">+</button></td>
        <td>{
    {item.price*item.number|rounding}}</