小白之作,喷子绕道
小白之作,大神勿喷。第一次写博客,有点小紧张。看完记得点赞呦!
这个小dome也不难,纯属自己瞎搞。本次练习是本地模拟数据。废话不多说,上图上代码!代码中有详细的注释
初始效果图
操作效果图
HTML部分
<!--使用cdn加速链接-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
vue实例区域
<div id="app">
<p>商品信息</p>
<table class="first" cellspacing="0">
<!-- 填充表头信息 -->
<tr v-for="item in msg1" :key="item.id">
<th v-cloak>{{item.id}}</th>
<th v-cloak>{{item.name}}</th>
<th v-cloak>{{item.price}}</th>
<th v-cloak>{{item.num}}</th>
<th v-cloak>{{item.Actions}}</th>
</tr>
<!-- 填充商品内容 -->
<tr v-for="item in msg" :key="item.id">
<td v-cloak>{{item.id}}</td>
<td v-cloak>{{item.name}}</td>
<td v-cloak>{{item.price}}</td>
<td v-cloak>{{item.num}}</td>
<!-- 填充操作按钮 -->
<td v-for="items in button">
<button @click="add(item.id)" v-if="item.hide" v-cloak>{{items.name}}</button>
<div class="hide" v-else>
<button @click="add1(item.id)" v-cloak>{{items.jia}}</button>
<button @click="add2(item.id)" v-cloak>{{items.jian}}</button>
</div>
</td>
</tr>
</table>
<p>购物车信息</p>
<table class="second" cellspacing="0" cellpadding="20px">
<!-- 填充表头信息 -->
<tr v-for="item in msg1" :key="item.id">
<th v-cloak>{{item.id}}</th>
<th v-cloak>{{item.name}}</th>
<th v-cloak>{{item.price}}</th>
<th v-cloak>{{item.num}}</th>
<th v-cloak>{{item.Actions}}</th>
</tr>
<!-- 填充购物车商品 -->
<tr v-for="item in arr" :key="item.id">
<td v-cloak>{{item.id}}</td>
<td v-cloak>{{item.name}}</td>
<td v-cloak>{{item.price}}</td>
<td v-cloak>{{item.num}}</td>
<td v-for="items in button">
<div class="style">
<button @click="add1(item.id)" v-cloak>{{items.jia}}</button>
<button @click="add2(item.id)" v-cloak>{{items.jian}}</button>
<button @click="del(item.id)">X</button>
</div>
</td>
</tr>
<tr>
<td colspan="2" v-cloak>总数:{{num}}</td>
<td colspan="2" v-cloak>总价:{{sum}}</td>
<td>
<button class="clear" @click="clear()">清空购物车</button>
</td>
</tr>
</table>
</div>
</body>
CSS部分
[v-cloak] {
display: none;
}
table {
margin: 0 auto;
text-align: center;
}
.first th,
.first td,
.second th {
border: 1px solid #ccc;
padding: 1.5vh 5vh;
}
.first td {
border-top: none;
}
.second th {
border: none;
border-bottom: 1px solid #ccc;
}
.second td {
padding: 10px;
}
button {
padding: .6vw 1vw;
background-color: #37b8de;
border: none;
border-radius: .5vh;
color: #fff;
}
.hide button {
padding: 1vh 1.1vw;
}
p {
text-align: center;
color: #37b8de;
font-weight: bold;
}
.clear {
background: red;
float: right;
}
.style button:nth-child(2),
.hide button:nth-child(2) {
background: #F90;
}
.style button:last-child {
background: red;
}
.style button {
width: 3vw;
}
JavaScript部分
var vm = new Vue({
el: "#app",
data: {
num: 0,//总数
sum: 0,//总价
arr: [],//购物车中的商品
button: [{
name: "加入购物车",
jia: "+",
jian: "-"
}],
msg: [{
hide: true,
id: 1,
name: "鱼香肉丝",
price: 12,
num: null
}, {
hide: true,
id: 2,
name: "宫保鸡丁",
price: 14,
num: null
}, {
hide: true,
id: 3,
name: "土豆丝",
price: 10,
num: null
}, {
hide: true,
id: 4,
name: "米饭",
price: 2,
num: null
}],
msg1: [{
id: "id",
name: "名称",
price: "价格",
num: "数量",
Actions: "Actions"
}]
},
methods: {
// 点击加入购物车
add(id) {
// 循环原数组
for (let i = 0; i < this.msg.length; i++) {
// 确保改变的参数为点击项的参数
if (this.msg[i].id == id) {
this.msg[i].hide = !this.msg[i].hide;//将“加入购物车”隐藏并显示为“+”、“-”
this.arr.push(this.msg[i]);//将当前的项添加到新的数组
this.num += this.msg[i].num = 1;//将当前项中的数量变成1
this.sum += this.msg[i].price
}
}
},
// 点击 +
add1(id) {
for (let j = 0; j < this.msg.length; j++) {
(this.msg[j].id == id) ? this.num = ++this.msg[j].num : ""// 点击 + 时,数量变为自增
};
this.cound()
},
// 点击 -
add2(id) {
for (let j = 0; j < this.msg.length; j++) {
if (this.msg[j].id == id) {
if (this.msg[j].num <= 0 || null) {
return alert("亲,不能再减了!");
} else {
this.msg[j].num -= 1;
}
}
};
this.cound()
},
// 点击 x
del(id) {
for (let j = 0; j < this.msg.length; j++) {
for (let i = 0; i < this.arr.length; i++) {
(this.arr[i].id == id) ? this.arr.splice(i, 1) : ""//删除当前项商品
};
if (this.msg[j].id == id) {//将删除项的参数恢复
this.msg[j].hide = true;
this.msg[j].num = null
}
};
this.cound()
},
// 清空购物车
clear() {
this.arr = [];//将购物车数组清空
for (let i = 0; i < this.msg.length; i++) {
this.msg[i].hide = true;
this.msg[i].num = null
};
this.num = this.sum = 0;
},
//计算总价、总数
cound() {
let sum = 0;//临时总价
let num = 0;//临时总数
this.arr.forEach(function (val, index) {
num += val.num;//累计总数
sum += val.num * val.price;//累计总价
});
this.sum = parseFloat(sum);
this.num = parseFloat(num);
}
}
})