全部效果的代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>購物車</title>
<!-- 引入js -->
<script src="../js/vue.js"></script>
<style>
td {
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<div class="addGood">
商品名稱：<input type="text" v-model="gname">
商品數(shù)量：<input type="number" v-model="gnum">
商品狀態(tài)：<select v-model="gstatus">
<option value="true">上架</option>
<option value="false">下架</option>
</select>
<button @click="addGood">增加商品</button>
</div>
<table border="=1px" width="800px" rules="all">
<thead>
<th><input type="checkbox" @click="checkAllMethod" v-model="checkAll">全選</th>
<th>編號</th>
<th>名稱</th>
<th>狀態(tài)</th>
<th>數(shù)量</th>
<th>操作</th>
</thead>
<tbody>
<tr v-for="good in goods">
<td><input type="checkbox" v-model="good.ischecked"></td>
<td>{{good.id}}</td>
<td>{{good.name}}</td>
<td>
<span v-if="good.status">上架狀態(tài)</span>
<span v-else="good.status">下架狀態(tài)</span>
</td>
<td>
<button @click="addNum(good.id)">+</button>
{{good.num}}
<button @click="subNum(good.id)">-</button>
</td>
<td>
<button @click="del(good.id)">刪除</button>
<button @click="goodDown(good.id)" v-if="good.status">點擊下架</button>
<button @click="goodUp(good.id)" v-else="good.status">點擊上架</button>
</td>
</tr>
</tbody>
</table>
選中的商品的總數(shù)量：{{total}}
</div>
</body>
<script>
var vue = new Vue({
el: "#app",
data: {
goods: [
{ id: 1, name: "蘋果", status: true, num: 5, ischecked: true },
{ id: 2, name: "香蕉", status: true, num: 5, ischecked: false },
{ id: 3, name: "橘子", status: false, num: 5, ischecked: false },
{ id: 4, name: "甘蔗", status: true, num: 5, ischecked: false },
{ id: 5, name: "荔枝", status: true, num: 5, ischecked: false }
]
,
gid: 5,
gname: "",
gstatus: true,
gnum: 5,
gisckecked: false,
checkAll: false
},
methods: {
addGood() {
//添加商品，往goods里面加一條json數(shù)據(jù)
var myGood = {
id: ++this.gid,
name: this.gname,
num: this.gnum,
status: this.gstatus,
ischecked: this.gisckecked
}
this.goods.push(myGood)
},
//全選，全不選
checkAllMethod() {
this.goods.forEach(element => {
//孩子checkbox的checked屬性值跟全選（父checked）的屬性保持一致
element.ischecked = !this.checkAll
});
},
//添加數(shù)據(jù)
addNum(id) {
this.goods.forEach(element => {
if (element.id == id) {
element.num++
}
})
},
//減少數(shù)量
subNum(id) {
this.goods.forEach(element => {
if (element.id == id) {
if (element.num > 0) {
element.num--
}
}
})
},
//刪除商品
del(id) {
var flag = confirm("你確定要刪除嗎？");
if (flag) {
this.goods.forEach((element, index) => {
if (element.id == id) {
this.goods.splice(index, 1)
}
})
}
},
//商品下架
goodDown(id) {
this.goods.forEach(element => {
if (element.id == id) {
element.status = !element.status
}
})
},
//商品上架
goodUp(id) {
this.goods.forEach(element => {
if (element.id == id) {
element.status = !element.status
}
})
}
},
computed: {
//計算方法，此處的代碼會根據(jù)data中的數(shù)據(jù)自動發(fā)生(重新計算)變化
total() {
var sum = 0;
this.goods.forEach(element => {
if (element.ischecked) {
sum += element.num
}
})
return sum
},
}
})
</script>
</html>最終實現(xiàn)的效果
?購物車功能實現(xiàn)
（1）實現(xiàn)全選，選中購物車中所有內(nèi)容
（2）點擊增加和減少按鈕，每個商品的數(shù)量發(fā)生變化，對應(yīng)的金額會變化
（3）動態(tài)計算總價，商品總數(shù)
（4）點擊操作中的刪除，或者下面的刪除所選商品按鈕可以刪除商品
（5）可以更改商品的狀態(tài)，上架或者下架，更靈活
代碼實現(xiàn)流程分析：
- 首先我們看這個代碼,它是沒有引入
vue.js的，所以我們的第一步當然是先引入一下 -
<script src="../js/vue.js"></script>這里我引用的是本地的vue.js,下面這個是官網(wǎng)的可以直接用，如果不行的話，我建議你們?nèi)ue官網(wǎng)看一下，https://cdn.staticfile.org/vue/2.2.2/vue.min.js。
-
可以給頁面添加好看的樣式，你們可以自行添加，我直接用表格實現(xiàn)，就沒有加樣式，代碼如下，這是寫在body里面的，這里用到了一些東西
-
使用v-for調(diào)用data里productList列表里的數(shù)據(jù)，循環(huán)創(chuàng)建元素
將循環(huán)出來的product數(shù)據(jù)通過插值表達式{{}}展現(xiàn)在頁面上
使用v-bind將product里的pro_img（圖片地址）綁定到img里的src上
使用v-model將product里的pro_num（商品數(shù)量）和input進行雙向綁定，以便修改商品數(shù)量
使用v-if，v-else來判斷狀態(tài) -
<div id="app"> <div class="addGood"> 商品名稱：<input type="text" v-model="gname"> 商品數(shù)量：<input type="number" v-model="gnum"> 商品狀態(tài)：<select v-model="gstatus"> <option value="true">上架</option> <option value="false">下架</option> </select> <button @click="addGood">增加商品</button> </div> <table border="=1px" width="800px" rules="all"> <thead> <th><input type="checkbox" @click="checkAllMethod" v-model="checkAll">全選</th> <th>編號</th> <th>名稱</th> <th>狀態(tài)</th> <th>數(shù)量</th> <th>操作</th> </thead> <tbody> <tr v-for="good in goods"> <td><input type="checkbox" v-model="good.ischecked"></td> <td>{{good.id}}</td> <td>{{good.name}}</td> <td> <span v-if="good.status">上架狀態(tài)</span> <span v-else="good.status">下架狀態(tài)</span> </td> <td> <button @click="addNum(good.id)">+</button> {{good.num}} <button @click="subNum(good.id)">-</button> </td> <td> <button @click="del(good.id)">刪除</button> <button @click="goodDown(good.id)" v-if="good.status">點擊下架</button> <button @click="goodUp(good.id)" v-else="good.status">點擊上架</button> </td> </tr> </tbody> </table> 選中的商品的總數(shù)量：{{total}} </div>
功能實現(xiàn)
(1)給購物車初始化
goods:[
{id:1,name:"蘋果",status:true,num:5,ischecked:true},
{id:2,name:"香蕉",status:true,num:5,ischecked:false},
{id:3,name:"橘子",status:false,num:5,ischecked:false},
{id:4,name:"甘蔗",status:true,num:5,ischecked:false},
{id:5,name:"荔枝",status:true,num:5,ischecked:false},
],
gid :5,
gname:"",
gstatus:true,
gischecked:false,
checkAll:false(2)添加功能實現(xiàn)
addGood(){
//添加商品，往goods里面加一條json數(shù)據(jù)
var myGood={
id:++this.gid,
name:this.gname,
num:this.gnum,
status:this.gstatus,
ischecked:this.gischecked
}
this.goods.push(myGood)
},效果演示
?(3)全選和單選按鈕功能實現(xiàn)
checkAllMethod(){
this.goods.forEach(element => {
//孩子checkbox的checked屬性值跟全選（父checked）的屬性保持一致
element.ischecked=this.checkAll
});
},效果展示
?（4）添加數(shù)據(jù)
addNum(id) {
this.goods.forEach(element => {
if (element.id == id) {
element.num++
}
})
},?(5)減少數(shù)量
//減少數(shù)量
subNum(id) {
this.goods.forEach(element => {
if (element.id == id) {
if (element.num > 0) {
element.num--
}
}
})
},（6）刪除商品
del(id) {
var flag = confirm("你確定要刪除嗎？");
if (flag) {
this.goods.forEach((element, index) => {
if (element.id == id) {
this.goods.splice(index, 1)
}
})
}
},（7）商品上架和下架
//商品下架
goodDown(id) {
this.goods.forEach(element => {
if (element.id == id) {
element.status = !element.status
}
})
},
//商品上架
goodUp(id) {
this.goods.forEach(element => {
if (element.id == id) {
element.status = !element.status
}
})
}
},（8）數(shù)量計算
computed: {
//計算方法，此處的代碼會根據(jù)data中的數(shù)據(jù)自動發(fā)生(重新計算)變化
total() {
var sum = 0;
this.goods.forEach(element => {
if (element.ischecked) {
sum += element.num
}
})
return sum
},
}
}) 最后總結(jié)：文章來源：http://www.zghlxwxcb.cn/news/detail-478925.html
這個項目對于初次使用vue的編程人員來說，可以很好的增加你對這門語言的熟練度，對后續(xù)vue的學(xué)習(xí)有很好的幫助，希望這個對小伙伴來說有用，謝謝大家。文章來源地址http://www.zghlxwxcb.cn/news/detail-478925.html
到了這里，關(guān)于vue購物車案例（源碼）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[gtp]購物車案例參考](https://imgs.yssmx.com/Uploads/2024/02/546131-1.png)
