购物车实例用于巩固v-for循环遍历数据、v-model数据双向绑定、数据定义、方法定义、v-if等知识点。
<!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>
[v-cloak]{
display: none;
}
.redColor{color: red}
</style>
</head>
<body>
<div id="app">
<div class="head">购物车</div>
<table cellpadding="5" cellspacing="0">
<tr v-for="(item, i) in cartlist" :key="i">
<td v-if="item.check"><input type="checkbox" checked @click="checkbtn(i)" /></td>
<td v-else><input type="checkbox" @click="checkbtn(i)" /></td>
<td><img :src="item.imageurl" /></td>
<td>{{item.title}}<span>{{item.price}}</span></td>
<td>
<button @click="min(i)">-</button>
<input type="text" :value="item.num" />
<button @click="add(i)">+</button>
</td>
</tr>
</table>
<div class="footer">
<em v-if="allCheck==cartlist.length">
<input type="checkbox" checked @click="allCheckbtn" />全选
</em>
<em v-else>
<input type="checkbox" @click="allCheckbtn" />全选
</em>
<i>总数量：{{allNum}}</i>
<i>总价格：{{allPrice}}</i>
</div>
</div>
<!-- 安装Vue.js -->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<script>
var vm = new Vue ({
el: '#app',
data: {
allCheck: 0,
allPrice: 0,
allNum: 0,
cartlist: [
{
id: 1,
imageurl: 'https://i.loli.net/2021/04/29/YqZCykhzotGmx6D.jpg',
title: '瓜子',
price: 30,
num: 1,
check: false
},
{
id: 2,
imageurl: 'https://i.loli.net/2021/04/29/dHNmEWJgCajtMr1.jpg',
title: '花生',
price: 30,
num: 1,
check: false
},
{
id: 3,
imageurl: 'https://i.loli.net/2021/04/29/12CdfSPayn5QOb6.jpg',
title: '西瓜子',
price: 30,
num: 2,
check: false
}
]
},
methods: {
checkbtn(i) {
console.log(this.cartlist[i])
this.cartlist[i].check = !this.cartlist[i].check
this.getAllNum()
this.getAllPrice()
},
getAllNum() {
var num=0
for (var i = 0; i < this.cartlist.length; i++) {
if (this.cartlist[i].check == true) {
num += parseInt(this.cartlist[i].num)
}
}
this.allNum=num
},
getAllPrice() {
var num=0
for (var i = 0; i < this.cartlist.length; i++) {
if (this.cartlist[i].check == true) {
num += parseInt(this.cartlist[i].num) * this.cartlist[i].price
}
}
this.allPrice=num
},
getAllCheck() {
var num = 0
for (var i = 0; i < this.cartlist.length; i++) {
if (this.cartlist[i].check == true) {
num++
}
}
this.allCheck=num
},
allCheckbtn(e) {
console.log(e.target.checked)
if (e.target.checked) {
for (var i = 0; i < this.cartlist.length; i++) {
this.cartlist[i].check = true
}
this.getAllNum()
this.getAllPrice()
} else {
for (var i = 0; i < this.cartlist.length; i++) {
this.cartlist[i].check = false
}
this.getAllNum()
this.getAllPrice()
}
},
add(i) {
this.cartlist[i].num++
this.getAllNum()
this.getAllPrice()
},
min(i) {
if (this.cartlist[i].num == 1) {
return
}
this.cartlist[i].num--
this.getAllNum()
this.getAllPrice()
}
}
})
</script>
</body>
</html>
