下面我看開始自己寫一個購物車的頁面.
我們希望得到如下的效果:
說明:
- 購買數量最小為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>
![[Spark]-RDD詳解之變量操作](http://pic.xiahunao.cn/[Spark]-RDD詳解之變量操作)
)
)
