Vue實戰-購物車案例
普通購物車
實作的功能：添加商品到購物車，計算總價
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>購物車</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<style>
th,td{
text-align: center;
}
</style>
<body>
<div id="app">
<div >
<div >
<div >
<h2 >購物車案例</h2>
<table >
<!--表頭-->
<tr>
<th>商品名稱</th>
<th>商品價格</th>
<th>商品數量</th>
<th>添加購物車</th>
</tr>
<!--表體-->
<tr v-for="data in dataList">
<td>{{data.name}}</td>
<td>{{data.price}}</td>
<td>{{data.number}}</td>
<td><input type="checkbox" v-model="checkGroup" :value="https://www.cnblogs.com/48xz/archive/2022/04/13/data"></td>
</tr>
</table>
<!--購物車選中狀態 -->
<hr>
<p v-if="checkGroup.length>0">購物車:{{checkGroup}}</p>
<p v-else="checkGroup.length>0" style="font-size: 20px">購物車:購物車為空</p>
<!--計算總價-->
<hr>
總價:{{totalPrice()}}
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
//商品資料
dataList: [
{name: 'Python實戰', price: 66, number: 2},
{name: 'Linux實戰', price: 55, number: 1},
{name: 'Java實戰', price: 77, number: 1},
],
//購物車
checkGroup: [],
},
methods: {
//計算總價
totalPrice(){
// 總價初始化
var total = 0
for (i in this.checkGroup){
console.log(i) // i是索引
total += this.checkGroup[i].price * this.checkGroup[i].number
}
return total
}
}
})
</script>
</html>
PS：for回圈的多種形式
上面我們使用
for (i in 陣列/物件)的形式，在js中for回圈常用的形式有四種
//方式一： i是索引,回圈選中的商品，基于迭代的回圈
for (i in this.checkGroup){
console.log(i) // i是索引
total += this.checkGroup[i].price * this.checkGroup[i].number
}
// 方式二： 基于索引的回圈，最普通的
for (var i=0;i<this.checkGroup.length;i++) {
total += this.checkGroup[i].price * this.checkGroup[i].number
}
//方式三： 基于迭代 for of (es6)
for (v of this.checkGroup) {
total += v.price * v.number
}
// 方式四：forEach 可迭代物件(陣列)的方法，陣列而言v是值，i是索引
this.checkGroup.forEach(function(v,i){
this.checkGroup.forEach((v,i)=>{
total += v.price * v.number
})
進階購物車
一鍵加入購物車功能實作
基于普通購物車實作功能：一鍵添加購物車功能
通過v-model雙向系結實作，input框系結change事件， checkbox選中true反之false
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>購物車</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<style>
th,td{
text-align: center;
}
</style>
<body>
<div id="app">
<div >
<div >
<div >
<h2 >購物車案例</h2>
<table >
<!--表頭-->
<tr>
<th>商品名稱</th>
<th>商品價格</th>
<th>商品數量</th>
<!-- <th>添加購物車</th>-->
<th>全選/取消全選 <input type="checkbox" v-model="checkall" @change="handleAll"></th>
</tr>
<!--表體-->
<tr v-for="data in dataList">
<td>{{data.name}}</td>
<td>{{data.price}}</td>
<td>{{data.number}}</td>
<td><input type="checkbox" v-model="checkGroup" :value="https://www.cnblogs.com/48xz/archive/2022/04/13/data" @change="handleOne"></td>
</tr>
</table>
<!--購物車選中狀態 -->
<hr>
<p v-if="checkGroup.length>0">購物車:{{checkGroup}}</p>
<p v-else="checkGroup.length>0" style="font-size: 20px">購物車:購物車為空</p>
<!--計算總價-->
<hr>
<p style="font-size: 20px">總價:{{totalPrice()}}￥</p>
<hr>
<!--是否全選-->
<!-- <p>是否全選： {{checkall}}</p>-->
<div style="font-size: 20px">
<p v-if="checkall === false">是否全選：否 --- {{checkall}}</p>
<p v-else-if="checkall === true">是否全選：是 --- {{checkall}}</p>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
//商品資料
dataList: [
{name: 'Python實戰', price: 66, number: 2},
{name: 'Linux實戰', price: 55, number: 1},
{name: 'Java實戰', price: 77, number: 1},
],
//購物車
checkGroup: [],
//全選,默認不全選
checkall:false
},
methods: {
//計算總價
totalPrice(){
// 總價初始化
var total = 0
for (i in this.checkGroup){
console.log(i) // i是索引
total += this.checkGroup[i].price * this.checkGroup[i].number
}
return total
},
//處理全選
handleAll(){
if (this.checkall){
//全選
this.checkGroup = this.dataList
}else {
this.checkGroup=[]
}
},
handleOne(){
//全選
if (this.checkGroup.length==this.dataList.length){
this.checkall=true
//不全選
}else {
this.checkall=false
}
}
}
})
</script>
</html>
商品數量加減的實作
實作功能：通過添加+，-樣式來控制商品數量的加減
注意：這里暫時不考慮庫存的情況，且減少商品數量做單獨處理，解決減少數量小于1的情況
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>購物車</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<style>
th,td{
text-align: center;
}
</style>
<body>
<div id="app">
<div >
<div >
<div >
<h2 >購物車案例</h2>
<table >
<!--表頭-->
<tr>
<th>商品名稱</th>
<th>商品價格</th>
<th>商品數量</th>
<!-- <th>添加購物車</th>-->
<th>全選/取消全選 <input type="checkbox" v-model="checkall" @change="handleAll"></th>
</tr>
<!--表體-->
<tr v-for="data in dataList">
<td>{{data.name}}</td>
<td>{{data.price}}</td>
<td>
<!-- 商品減少 -->
<button @click="handleCount(data)">-</button>
{{data.number}}
<!-- 商品增加 -->
<button @click="data.number++">+</button>
</td>
<td><input type="checkbox" v-model="checkGroup" :value="https://www.cnblogs.com/48xz/archive/2022/04/13/data" @change="handleOne"></td>
</tr>
</table>
<!--購物車選中狀態 -->
<hr>
<p v-if="checkGroup.length>0">購物車:{{checkGroup}}</p>
<p v-else="checkGroup.length>0" style="font-size: 20px">購物車:購物車為空</p>
<!--計算總價-->
<hr>
<p style="font-size: 20px">總價:{{totalPrice()}}￥</p>
<hr>
<!--是否全選-->
<!-- <p>是否全選： {{checkall}}</p>-->
<div style="font-size: 20px">
<p v-if="checkall === false">是否全選：否 --- {{checkall}}</p>
<p v-else-if="checkall === true">是否全選：是 --- {{checkall}}</p>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
//商品資料
dataList: [
{name: 'Python實戰', price: 66, number: 2},
{name: 'Linux實戰', price: 55, number: 1},
{name: 'Java實戰', price: 77, number: 1},
],
//購物車
checkGroup: [],
//全選,默認不全選
checkall:false
},
methods: {
//計算總價
totalPrice(){
// 總價初始化
var total = 0
for (i in this.checkGroup){
console.log(i) // i是索引
total += this.checkGroup[i].price * this.checkGroup[i].number
}
return total
},
//處理全選
handleAll(){
if (this.checkall){
//全選
this.checkGroup = this.dataList
}else {
this.checkGroup=[]
}
},
handleOne(){
//全選
if (this.checkGroup.length==this.dataList.length){
this.checkall=true
//不全選
}else {
this.checkall=false
}
},
//商品減少
handleCount(data){
if (data.number<=1){
alert('不能再少了')
}
else {
data.number--
}
}
}
})
</script>
</html>
不足：下面的提示資訊可以隱藏，個人只是為了提示，商品洗掉沒有寫自行實作
如有錯誤請指正感謝~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/458143.html
標籤：其他
下一篇：Node.js基礎入門第八天