<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>购物车</title> <link type="text/css" href="https://www.jb51.net/style.css" > </head> <body> <div v-cloak> ... </div> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <script src="https://www.jb51.net/index.js"></script> </body> </html>
因为有可能购物车中的商品被全部删除，所以我们在此加了判断，如果列表为空，则给出友好提示：
<template v-if="list.length"> ... </template> <!--当购物车为空时，则提示--> <div v-else>购物车内暂时没有商品</div>
接着用 table 来展示购物车内的商品列表：
<table> <thead> <tr> <th><input type="checkbox" @click="checkAllOrNot($event)"></th> <th>序号</th> <th>商品</th> <th>单价</th> <th>数量</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="(item,index) in list"> <td><input type="checkbox" @click="checkItem($event,index)"></td> <td>{{index+1}}</td> <td>{{item.name}}</td> <td>{{item.price}}</td> <td> <button @click="reduceCount(index)" :disabled="item.count===1">-</button> {{item.count}} <button @click="addCount(index)">+</button> </td> <td> <button @click="remove(index)">删除</button> </td> </tr> </tbody> </table> <div>总价：￥{{totalPrice}}</div>
使用 v-for 指令，循环迭代出商品列表。
表格内的每一个勾选框与按钮都绑定了相应的事件。全选框与每一行的勾选框还传入了原生 DOM 事件 $event，用于获取当前所操作的元素。
*这里对减少商品数量的按钮进行了判断，当相应商品的数量只剩下一个时，绑定 disabled 样式，让它变成不可用。
4 演示
