Vue.js实现的购物车功能详解

<div id="app">    <template v-if="list.length">      <table>        <thead>          <tr>            <th></th>            <th>商品名称</th>            <th>商品单价</th>            <th>购买数量</th>            <th>操作</th>            <th><input type="checkbox" name="list" @click="checkBox()" id="checkBox"></th>          </tr>        </thead>        <tbody>          <tr v-for="(item, index) in list">            <td>{{ index + 1 }}</td>            <td>{{ item.name }}</td>            <td>{{ item.price }}</td>            <td>                <button                  @click="handleReduce(index)"                  :disabled="item.count === 1" class="btn"> - </button>                {{ item.count }}                <button @click="handleAdd(index)" class="btn"> + </button>            </td>            <td>                <button @click="handleRemove(index)" class="btns">移除</button>            </td>            <td style="text-align: center;">                <input type="checkbox" name="list" @click="totalPrices()">            </td>          </tr>        </tbody>      </table>      <div id="price">总价：￥{{totalPrice}}</div>    </template>    <div v-else>购物车为空</div></div>

*{  margin: 0px;  padding: 0px;}[v-cloak] {  display: none;}#app{  width: 200px;  height: 200px;  margin: 10px auto;  text-align: center;}#price{  width: 457px;  height: 40px;  border: 1px solid #e9e9e9;  border-top: 0;  line-height: 40px;}table{  border: 1px solid #e9e9e9;  border-collapse: collapse;  border-spacing: 0;  empty-cells: show;}th,td{  padding: 8px 16px;  border:1px solid #e9e9e9e9;  text-align: left;}th{  background: #f7f7f7;  color: #5c6c77;  font-weight: 600;  white-space: nowrap;}.btn{  width: 20px;  height: 20px;  border-radius: 50%;  border:1px solid #cccccc;  background: #ffffff;  color: #778899;}.btns{  width: 40px;  height: 20px;  border-radius: 5px;  border:1px solid #cccccc;  background: #ffffff;  color: #778899;  line-height: 20px;}

var app=new Vue({      el:'#app',      data:{        list: [          {            id:1,            name:'iPhone 7',            price:6188,            count:1          },          {            id:2,            name:'iPad Pro',            price:5888,            count:1          },          {            id:3,            name:'MaxBook Pro',            price:21488,            count:1          }        ],        totalPrice: 0      },      methods:{        handleReduce: function (index) {//减少按钮          if(this.list[index].count === 1){            return;          }          this.list[index].count--;          this.$options.methods.totalPrices();        },        handleAdd: function (index) {//增加按钮          this.list[index].count++;          this.$options.methods.totalPrices();        },        handleRemove: function (index) {//移除按钮          this.list.splice(index, 1);          $("tr").eq(index+1).remove("input[type='checkbox']");          this.$options.methods.totalPrices();        },        checkBox: function (){//选中状态          if($("#checkBox").is(':checked')==true){            $("input[type='checkbox']").each(function(){              $("input[type='checkbox']").attr("checked",true);            });          }else{            $("input[type='checkbox']").each(function(){              $("input[type='checkbox']").attr("checked",false);            });          }          this.$options.methods.totalPrices();        },        totalPrices: function (){//计算总价格          var total = 0;          for(var i = 0;i < app.list.length;i++){            var item = app.list[i];            if($("input[type='checkbox']").eq(i+1).is(':checked')){              total += item.price * item.count;            }          }          app.totalPrice = total.toString().replace(//B(?=(/d{3})+$)/g,',');        }      }});