vue实现购物车添加删除效果
效果图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{
width: 100px;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
<script src="../node_modules/vue/dist/vue.js"></script> -->
</head>
<body>
<div id="app">
<div class="container">
<h1 class="text-center">购物车</h1>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th></th>
<th>商品名称</th>
<th>商品图片</th>
<th>商品价格</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(good,idx) of goods">
<td>
<input type="checkbox" v-model="good.ischeck">
</td>
<td>{{ good.goodsname }}</td>
<td><img v-bind:src="good.goodsimg"></td>
<td>{{ good.goodsprice |formatPrice(2) }}</td>
<td>
<button class="btn" @click="down(idx)">-</button>
[ {{ good.num }} ]
<button class="btn" @click="up(idx)">+</button>
</td>
<td>{{ good.goodsprice * good.num |formatPrice(2) }}</td>
<td><button class="btn btn-danger" @click="del(idx)">删除</button></td>
</tr>
<tr>
<!-- :checked="checkAll" -->
<td><label><input type="checkbox" v-model="checkAll" @click="ckAll"> {{ checkAll ? "反选" : "全选" }} </label></td>
<td colspan="6">商品总价格：{{ totalPrice | formatPrice }}</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
//定义全局过滤器，让所有从这里开始向下的示例都可以使用
Vue.filter("formatPrice",(val,n=1)=>{
return '￥ '+ val.toFixed(n) +' 元';
})
new Vue({
el:'#app',
data:{
checkAll:false,
goods:[
{
goodsname:'手机666手机666手机666',
goodsimg:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2394127796,1160475396&fm=26&gp=0.jpg',
goodsprice:3999.00,
num:1,
ischeck:false
},
{
goodsname:'电脑888电脑888电脑888',
goodsimg:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1359196326,1252663531&fm=26&gp=0.jpg',
goodsprice:3199.00,
num:5,
ischeck:false
},
{
goodsname:'笔记本999笔记本999笔记本999',
goodsimg:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1846530277,3644696796&fm=26&gp=0.jpg',
goodsprice:599.00,
num:97,
ischeck:false
},
{
goodsname:'耳机333耳机333耳机333耳机333',
goodsimg:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1718690979,1931695126&fm=26&gp=0.jpg',
goodsprice:699.00,
num:97,
ischeck:false
}
],
},
methods:{//自定义方法
//删除
del(id){
this.goods.splice(id,1);
},
//全选/反选
ckAll(){
console.log(this.checkAll);
this.goods.map(item=>{
item.ischeck = !this.checkAll;
})
},
//+
up(id){
if(this.goods[id].num >= 99){
alert("商品最多"+this.goods[id].num+"件");
return false;
}
this.goods[id].num++;
},
//-
down(id){
if(this.goods[id].num <= 1){
alert("商品最少"+this.goods[id].num+"件");
return false;
}
this.goods[id].num--;
}
},
filters:{//局部 过滤器
// formatPrice(val,n=1){
// return '￥ '+ val.toFixed(n) +' 元';
// }
},
watch:{//监听
// 使用同一个变量 会发生冲突 用点击事件解决
// checkAll(){
// // 监听全选状态
// this.goods.map(item=>{
// item.ischeck = this.checkAll;
// })
// }
},
computed:{//计算
totalPrice(){
// this.goods.reduce((sum,item)=>{
// if(item.ischeck){
// return sum += item.goodsprice * item.num;
// }
// },0);
let sum = 0;
//遍历数组计算
this.goods.map(item=>{
if(item.ischeck){
sum += item.goodsprice * item.num;
}
});
// 当数组的所有元素都为true时，才为true
this.checkAll = this.goods.every(item=>{
return item.ischeck;
})
return sum;
}
}
})
</script>
</body>
</html>
本文来自博客园，作者：JackieDYH，转载请注明原文链接：https://www.cnblogs.com/JackieDYH/p/17634673.html
