<!DOCTYPE html> <html lang="en"> <head> <title>购物车示例</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="style.css" rel="stylesheet"> </head> <body> <div id="app" v-cloak> <template v-if="list.length"> <table> <thead> <tr> <th></th> <th>商品名称</th> <th>商品单价</th> <th>购买数量</th> <th>操作</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">-</button> {{ item.count }} <button @click="handleAdd(index)">+</button> </td> <td> <button @click="handleRemove(index)">移除</button> </td> </tr> </tbody> </table> <div>总价：￥ {{ totalPrice }}</div> </template> <div v-else>购物车为空</div> </div> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> <script> 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:'MacBook Pro', price:21488, count:1 } ] }, computed:{ //计算属性 totalPrice:function(){ var total=0; for(var i=0;i<this.list.length;i++) { var item=this.list[i]; total+=item.price*item.count; } return total.toString().replace(/B(?=(d{3})+$)/g,','); } }, methods:{ //数量减去 handleReduce:function(index){ if(this.list[index].count===1) return; this.list[index].count--; }, //添加 handleAdd:function(index){ this.list[index].count++; }, //删除 handleRemove:function(index) { this.list.splice(index,1) } } }); </script> </body> </html>
[v-cloak]{
display: none;
}
table{
border:1px solid #e9e9e9;
border-collapse: collapse;/* 表格合并边框模型 */
border-spacing: 0;
empty-cells: show;/* 显示表格中空单元格上的边框和背景 */
}
th,td{
padding: 8px 16px;
border: 1px solid #e9e9e9;
text-align: center;
}
th{
background: #f7f7f7;
color: #5c6b77;
font-weight: bold;
white-space: nowrap;/*规定段落中的文本不进行换行：*/
}
最终效果：
