當前位置：首頁 > 前端技术 > vue >内容正文

vue

vue --- 购物车页面

發布時間：2023/12/10 vue 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue --- 购物车页面小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

下面我看開始自己寫一個購物車的頁面.
我們希望得到如下的效果:

說明:

購買數量最小為0

購買數量變化時,對應的總價隨之變化

點擊移除操作對應的商品會移除掉,總價隨之改變

每個商品作為一個list表的一個對象

每個對象,包含id、name、price、count等屬性

index.html (整體代碼最后給出)

導入依賴(從上往下)

// 樣式表 <link rel="stylesheet" style="text/css" href="style.css"> // vue的cdn <script src="https://unpkg.com/vue/dist/vue.min.js"></script> // js <script src="index.js"></script>

表格 (表頭+表身)
我們希望,所有商品移除時,顯示購物車為空的頁面,否則就顯示正常的頁面

// 依賴 <template v-if="list.length"> // 根據商品的長度判斷購物車是否為空 </template> // template是vue內置的一個html元素,它在編譯后不會顯示在Html頁面里面 <div v-else>購物車為空</div> // 表頭 <tr><th></th><th>商品名稱</th><th>商品單價</th><th>購買數量</th><th>操作</th> </tr> // 表身 // 這個地方需要注意的是在商品數量為0時, “-”將無效 <template v-for="(item,index) in list"><tr><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.price}}</td>// 數量為0時,減號按鈕將失效使用 :disable= "item.count ==='0' " 將其禁用// 數量屬性,左右2邊,分別有一個減少和增加按鈕使用<button>@click綁定對應方法// 傳遞給對應方法時,需要給出當前操作的數量的序號,此處選擇的是index,(ps:若傳item.id,按不同順序刪除的時候,將導致商品的編號和在list中的位置不一致)<td> // 數量<button @click="handleReduce(index)" :disabled="item.count === 0">-</button>{{ item.count }}<button @click="handleAdd(index)" >+</button></td><td> // 移除操作<button @click="handleRemove(index)">移除</button></td></tr> </template>

整體代碼(index.html)

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>購物車示例</title><link rel="stylesheet" type="text/css" href="style.css"> </head><body><div id="app" cloak><template v-if="list.length"><table><thead><tr><th></th><th>商品名稱</th><th>商品單價</th><th>購買數量</th><th>操作</th></tr></thead><tbody><template v-for="(item,index) in list"><tr><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.price}}</td><td><button @click="handleReduce(index)" :disabled="item.count === 0">-</button>{{ item.count }}<button @click="handleAdd(index)">+</button></td><td><button @click="handleRemove(index)">移除</button></td></tr></template></tbody></table><div>總價: ￥{{ totalPrice }}</div></template><div v-else>購物車為空</div></div><script src="https://unpkg.com/vue/dist/vue.min.js"></script><script src="index.js"></script> </body></html>

index.js

需要注意:價格每格3位數,就會顯示一個","需要:

// 正則 total.toString().replace(/\B(?=(\d{3})+$)/g, ',')

移除按鈕,實際上是對list進行刪除操作.可以使用js的splice.(i,1);

this.list.splice(i, 1) ; // 在vue中使用this可以訪問上面定義的數據 // index.js 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(i) {this.list[i].count--;},handleAdd: function(i) {this.list[i].count++;},handleRemove: function(i) {this.list.splice(i, 1);}} });

此時的效果如下：

還缺少樣式.下面附上樣式的代碼

style.css

// style.css [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: left; }th {background: #f7f7f7;color: #5c6b77;font-weight: 600;white-space: nowarp; }

以上為了以后大項目開發而分開寫的,也可以向下面這樣放在一起:

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>購物車示例</title><style>[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: left; }th {background: #f7f7f7;color: #5c6b77;font-weight: 600;white-space: nowarp; }</style> </head><body><div id="app" cloak><template v-if="list.length"><table><thead><tr><th></th><th>商品名稱</th><th>商品單價</th><th>購買數量</th><th>操作</th></tr></thead><tbody><template v-for="(item,index) in list"><tr><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.price}}</td><td><button @click="handleReduce(index)" :disabled="item.count === 0">-</button>{{ item.count }}<button @click="handleAdd(index)">+</button></td><td><button @click="handleRemove(index)">移除</button></td></tr></template></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(i) {this.list[i].count--;},handleAdd: function(i) {this.list[i].count++;},handleRemove: function(i) {this.list.splice(i, 1);}} });</script> </body></html>

總結

以上是生活随笔為你收集整理的vue --- 购物车页面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：湛江高考2021成绩查询,2021广东省
下一篇： vue --- 从模块从父元素获取数据