利用Vue实现了简单的购物车，基本功能包含，单选、全选、反选、删除，数量加减，小计和总价等
看效果：
下面上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>购物车</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="./css/animate.css" />
<style>
#box{
width: 800px;
margin: 20px auto;
position: relative;
background-color: rgb(217, 228, 227);
box-sizing: border-box;
padding: 8px;
}
table{
width: 100%;
text-align: center;
vertical-align: middle;
}
tr{
/* background-color: #ccc; */
height: 40px;
}
.fade-enter-active{
animation: bounceOut .8s;
}
span{
display: inline-block;
width: 40px;
background-color: #fff;
cursor: pointer;
}
input[type="text"]{
border: 1px solid #ccc;
outline: none;
vertical-align: middle;
height: 20px;
margin: 0 10px;
padding: 0 0 0 10px;
}
form{
width: 400px;
position: absolute;
background-color: #fff;
text-align: center;
left: 50%;
top:50%;
transform: translate(-50%);
}
</style>
</head>
<body>
<div id="box">
<!-- <form v-show="bool">
<p>
<label>商品名称</label>
<input type="text" v-model="name">
</p>
<p>
<label>商品单价</label>
<input type="text" v-model="price">
</p>
<p>
<label>商品数量</label>
<input type="text" v-model="nums">
</p>
<p>
<button>取消</button>
<button>提交</button>
</p>
</form> -->
<table>
<tr>
<th>全选<input type="checkbox" v-model="checkSum"></th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<transition name="fade">
<tr v-for="(item,index) in goods" :key="index">
<td><input type="checkbox" id="checkbox" v-model="item.check"></td>
<td>{{item.title}}</td>
<td>￥{{item.price | changeNumber}}</td>
<td><span @click="less(index)">--</span><input type="text" v-model="item.count"><span @click="plus(index)">+</span></td>
<td>￥{{item.count*item.price | changeNumber}}</td>
<td><button @click="del(index)">删除</button></td>
</tr>
</transition>
</table>
<button @click="anti">反选</button> <button @click="delChoose">删除选中</button>
<!-- <button @click="add">新增</button> -->
<h2>总价：￥{{sums | changeNumber}}</h2>
<h2>总数量：{{numbers}}</h2>
<h2>选中数量：{{number}}</h2>
</div>
<script>
Vue.filter("changeNumber",(value,num)=>{
if(!value) return value;
num = num || 2
return value.toFixed(num);
})
var vm = new Vue({
el:"#box",
data:{
goods:[
{check:false,title:"上衣",price:200,count:10},
{check:false,title:"裤子",price:100,count:10},
{check:false,title:"鞋子",price:500,count:10},
{check:false,title:"风衣",price:1000,count:10},
{check:false,title:"帽子",price:300,count:10},
{check:false,title:"西服",price:2000,count:10},
],
name:'',
price:0,
nums:0,
bool:false,
},
methods:{
del(index){
this.goods.splice(index,1)
// console.log(index)
},
add(){
this.bool = !this.bool
},
less(value){
if(this.goods[value].count<=1) return
this.goods[value].count--
// console.log(value)
},
plus(value){
this.goods[value].count++
},
anti(){
this.goods.forEach(item=>{
item.check = !item.check;
})
},
delChoose(){
var arr = this.goods.filter(item=>{
if(!item.check){
return item;
}
})
this.goods = arr;
}
},
computed:{
checkSum:{
get:function(){
var arr = []
this.goods.forEach(item=>{
arr.push(item.check);
})
var flag = arr.indexOf(false) >=0 ? false : true;
return flag
},
set:function(e){
// console.log(e)
this.goods.forEach(item=>{
item.check = e
})
}
},
sums:function(){
var sums = 0;
this.goods.forEach(item=>{
if(item.check === true){
sums += item.price*item.count;
}
})
return sums;
},
numbers:function(){
var numbers = 0;
this.goods.forEach(item=>{
numbers+= item.count*1;
})
return numbers;
},
number:function(){
var number = 0;
this.goods.forEach(item=>{
if(item.check === true){
number += item.count*1;
}
})
return number;
}
}
})
</script>
</body>
</html>
对于本项目有什么想法以及问题，请联系我…