本文参考：Vue Cli（脚手架）实现购物车小案例 - - php中文网博客

 效果图：

 

编写流程：

1、首先通过@vue/cli创建工程

vue create totalprice

2、改写App.vue代码如下：

<template><div><div v-if="cartlist.length <= 0">你没有选择的商品，购物车为空，去购物</div><table v-else><caption>    <!--表格标题--><h1>购物车</h1></caption><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" v-model="item.checkbox"></td><td>{{ item.id }}</td><td>{{ item.name }}</td><td><small>￥</small>{{ item.price.toFixed(2) }}</td><td><button @click="item.count--" :disabled="item.count <= 1">-</button>{{ item.count }}<button @click="item.count++">+</button></td><td><button @click.prevent="del(index)">删除</button></td></tr><tr><td colspan="3" align="center">总价</td><td colspan="3" align="center">{{ totalPrice }}</td></tr></table></div>
</template><script>export default {name: 'app',data(){return{cartlist:[{id: 1,checkbox: true,name: '《细说PHP》',price: 10,count: 1},{id: 2,checkbox: true,name: '《细说网页制作》',price: 10,count: 1},{id: 3,checkbox: true,name: '《细说JavaScript语言》',price: 10,count: 1},{id: 4,checkbox: true,name: '《细说DOM和BOM》',price: 10,count: 1},{id: 5,checkbox: true,name: '《细说Ajax与jQuery》',price: 10,count: 1},{id: 6,checkbox: true,name: '《细说HTML5高级API》',price: 10,count: 1}]}},methods:{del(index){this.cartlist.splice(index, 1)}},computed:{totalPrice(){let sum = 0;for(let book of this.cartlist){if(book.checkbox){sum += book.price * book.count;}}return '￥' + sum.toFixed(2)}}}
</script><style scoped>table{width: 600px;border: 1px solid #888888;border-collapse: collapse;}th{background-color: #ccc;}td,th{border: 1px solid #888888;padding: 10px;}</style>

3、代码中相关内容说明：

（1）<caption>为table的标题

（2）在组件中使用v-for时，必须添加:key属性，否则会报错，为了性能考虑

（3）colspan属性，表示某个td横跨的列数

（4）splice()函数用于从当前数组中移除一部分连续的元素。参数包括start和deleteCount。

（5）border-collapse，折叠样式