Vue.js框架實現(xiàn)購物車功能
更新時間：2021年06月28日 10:48:36 作者：涉水的小菜嘰
這篇文章主要為大家詳細介紹了Vue.js框架實現(xiàn)購物車功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Vue.js框架實現(xiàn)購物車的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/vue.min.js"></script>
</head>
<body>
<div id="app" style="position: relative;left: 30%">
<table cellpadding="10">
<thead>
<th><input type="checkbox" v-model="cb" v-on:click="allSelect">全選</th>
<th>名稱</th>
<th>單價</th>
<th>數(shù)量</th>
<th>金額</th>
<th>操作</th>
</thead>
<tbody>
<tr v-for="x in info">
<td><input type="checkbox" v-model="x.bol" v-on:click="sign()"></td>
<td>{{x.name}}</td>
<td>{{x.price}}</td>
<td><input type="number" v-model="x.num" min="0" style="width: 50px;text-align: center" v-on:click="count(x)" v-on:change="count(x)"></td>
<td>{{x.total}}</td>
<td><button v-on:click="del(x)">刪除</button></td>
</tr>
</tbody>
</table>
<Br>
<p>總金額：{{all}}</p>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
all: 0,
cb: false,
info: [{
bol: false,
name: "iphone7",
price: 6000,
num: 1,
total: 6000
}, {
bol: false,
name: "榮耀6x",
price: 1200,
num: 1,
total: 1200
}, {
bol: false,
name: "dell筆記本",
price: 4000,
num: 1,
total: 4000
}]
},
methods: {
//計算單價
count: function(obj) {
for(var i = 0; i < this.info.length; i++) {
//
if(this.info[i] == obj) {
this.info[i].total = obj.price * obj.num;
}
//如果被選中了，就計算總價格
if(obj.bol) {
this.allSelect();
}
}
},
//刪除
del: function(obj) {
this.info.splice(this.info.indexOf(obj), 1)
this.allCount();
},
//單選
sign: function() {
this.allCount();
},
//全選
allSelect: function() {
for(var i = 0; i < this.info.length; i++) {
this.info[i].bol = this.cb;
}
this.allCount();
},
//計算總價
allCount: function() {
//每次計算總價都要清空
this.all = 0;
for(var i = 0; i < this.info.length; i++) {
//計算被選中的商品
if(this.info[i].bol) {
this.all += this.info[i].total;
}
}
}
}
})
</script>
</body>
</html>
效果圖：
更多文章可以點擊《Vue.js前端組件學習教程》學習閱讀。
關于vue.js組件的教程，請大家點擊專題vue.js組件學習教程進行學習。
更多vue學習教程請閱讀專題《vue實戰(zhàn)教程》
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
vue cli 3.0下配置開發(fā)環(huán)境下的sourcemap問題
這篇文章主要介紹了vue cli 3.0下配置開發(fā)環(huán)境下的sourcemap問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單無縫滾動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
el-date-picker 選擇日期范圍只保存左側日期面板的實現(xiàn)代碼
接到這樣的需求,日期篩選,但限制只能選擇同一個月的數(shù)據(jù),故此應該去掉右側月份面板,今天通過本文給大家分享el-date-picker 選擇日期范圍只保存左側日期面板的實現(xiàn)代碼,感興趣的朋友一起看看吧2024-06-06
vue-cli 3.0 自定義vue.config.js文件,多頁構建的方法
今天小編就為大家分享一篇vue-cli 3.0 自定義vue.config.js文件,多頁構建的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue-品牌管理案例-指令和過濾器的相關知識，文中通過代碼給大家介紹了過濾器的基本使用,需要的朋友可以參考下2019-11-11
Vue2.5通過json文件讀取數(shù)據(jù)的方法
本文通過實例代碼給大家詳細介紹了Vue2.5通過json文件讀取數(shù)據(jù)的方法，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-02-02
這篇文章主要介紹了vue項目多路由表頭吸頂實現(xiàn)的幾種布局方式,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
前端vue+express實現(xiàn)文件的上傳下載示例
本文主要介紹了前端vue+express實現(xiàn)文件的上傳下載示例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12
vue?element-ui的el-input-number默認值設置為空方法
這篇文章主要給大家介紹了關于vue?element-ui的el-input-number默認值設置為空的相關資料,el-input-number組件是Element?UI非常常用的一個數(shù)字輸入框組件,它提供了默認值設置的選項,需要的朋友可以參考下2023-08-08
在開發(fā)中,PDF預覽和交互功能是一個常見的需求,無論是管理系統(tǒng)、在線教育平臺,還是企業(yè)內(nèi)部的知識庫,能夠高效地展示和操作PDF文件都能極大地提升用戶體驗,本文將詳細介紹如何在Vue項目中實現(xiàn)pdf預覽功能,需要的朋友可以參考下2025-03-03