Vuejs如何實現購物車功能
- php中世界最好的语言原創
- 2018-05-24 09:20:213309瀏覽
這次為大家帶來Vuejs怎樣實現購物車功能，Vuejs實現購物車功能的注意事項有哪些，以下就是實戰案例，一起來看一下。
開始更新前端框架Vue.JS的相關部落格。
功能概述
學習了Vue.JS的一些基礎知識，現在利用指令、資料綁定這些基礎知識開發一個簡單的購物車功能。功能要點如下：
（1）顯示商品的名稱、單價和數量；
（2）商品的數量可以增加和減少；
（3）購物車的總價要即時更新，即數量發生變動，總價也要相應的改變；
（4）商品可以從購物車中移除；
（5）具有選擇功能，只計算選取的商品的總價。
程式碼
程式碼分成三部分，分別是HTML、JS、css。關鍵的是HTML和JS。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 购物车</title>
<script src="../js/vue.min.js"></script>
<link href="../css/cart.css" rel="external nofollow" rel="stylesheet">
</head>
<body>
<p id="app" v-cloak>
<template v-if="list.length">
<table>
<thead>
<tr>
<th><input type="checkbox" v-on:click="swapCheck" v-model="checked"></th>
<th>商品名称</th>
<th>商品单价</th>
<th>商品数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in list">
<td><input type="checkbox" v-model="selectList" :id="item.id" :value="index" name="selectList" ></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>
<p>总价：￥ {{ totalPrice }}</p>
</template>
<p v-else>购物车为空！</p>
</p>
<script src="../js/cart.js"></script>
</body>
</html>
JS
var app = new Vue({
el:'#app',
data:{
list:[
{
id:1,
name:'iPhone 8',
price:8888,
count:1
},
{
id:2,
name:'Huwei Mate10',
price:6666,
count:1
},
{
id:3,
name:'Lenovo',
price:6588,
count:1
}
],
selectList:[],
checked:false
},
computed:{
totalPrice:function(){
var total = 0;
for(var i = 0,len = this.selectList.length;i < len;i++){
var index = this.selectList[i];
var item = this.list[index];
if(item){
total += item.price * item.count;
}
else{
continue;
}
}
return total.toString().replace(/\B(?=(\d{3})+$)/g,',');
}
},
methods:{
handleReduce:function(index){
var item = this.list[index];
if(item.count < 2){
return;
}
item.count--;
},
handleAdd:function(index){
var item = this.list[index];
item.count++;
},
handleRemove:function(index){
this.list.splice(index,1);
},
swapCheck:function(){
var selectList = document.getElementsByName('selectList');
var len = selectList.length;
if(this.checked){
for(var i = 0;i < len;i++){
var item = selectList[i];
item.checked = false;
}
this.checked = false;
this.selectList = [];
}
else{
for(i = 0;i < len;i++){
item = selectList[i];
if(item.checked === false){
item.checked = true;
this.selectList.push(selectList[i].value);
}
}
this.checked = true;
}
}
}
});
CSS
[v-cloak]{
display: none;
}
table{
border: 1px solid black;
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
}
th,td{
padding: 8px 16px;
border:1px solid black;
text-align: center;
}
th{
background-color: gray;
}
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
以上是Vuejs如何實現購物車功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：js如何使用定時器實現倒數功能下一篇：js如何使用定時器實現倒數功能