1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138
| <!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图书购物车</title> </head> <style> body { padding: 0; margin: 0; box-sizing: border-box; }
.table_warp { padding: 20px; }
table { border: 1px solid #ccc; border-right: 0; border-bottom: 0; border-spacing: 0; }
thead { background-color: rgb(246, 246, 246); }
td, th { padding: 10px; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; }
button { margin: 0 5px; } </style>
<body> <div class="table_warp" id="app"> <h2>图书购物车</h2> <div v-if="bookList.length"> <table> <thead> <th> <td v-for="(item,index) in th_title">{{item}}</td> </th> </thead> <tbody> <tr v-for="(item,index) in bookList"> <td>{{index+1}}</td> <td>{{item.name}}</td> <td>{{item.datePublish}}</td> <td>{{item.price*item.puNum| getPrice}}</td> <td><button @click="item.puNum>1?item.puNum--:false">-</button>{{item.puNum}}<button @click="item.puNum++">+</button></td> <td><button @click="removeBook(index)">移除</button></td> </tr> </tbody> </table> <div>总价格:{{totalPrice | getPrice}}</div> </div> <h3 v-else>购物车为空</h3> </div>
</body> <script src="./js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { th_title: ['书籍名称', '出版日期', '价格', '购买数量', '操作'], bookList: [{ id: 0, name: '《算法导论》', datePublish: '2006-9', price: 85.00, puNum: 2 }, { id: 1, name: 'UNIX编程艺术', datePublish: '2008-9', price: 35.00, puNum: 1 }, { id: 2, name: '《编程珠玑》', datePublish: '2006-9', price: 85.00, puNum: 1 }, { id: 3, name: '《算法导论》', datePublish: '2010-9', price: 100.00, puNum: 1 }, { id: 4, name: '《算法导论》', datePublish: '2026-9', price: 76.00, puNum: 1 } ] }, computed: { totalPrice() { return this.bookList.reduce((v, i) => v + i.price * i.puNum, 0) } }, methods: { removeBook(index) { this.bookList.splice(index, 1) } }, filters: { getPrice(price) { return '¥' + price.toFixed(2) } } }) </script>
</html>
|