溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天中午廢了一會時間，總算把項目中的購物車的單選、全選、以及實現數據的動態顯示做出來了，給小白分享一下我個人一個解決辦法：
購物車的基本頁面如下：
先說實現的總體思路
這是我個人的思路，具體代碼實現如下：
html：
<div id="a" class="container">
<table class="table table-hover" v-if="list.length">
<thead>
<tr>
<th><input type="checkbox" id="box" @click="checkAll" v-model="checkall" /></th>
<th>圖片</th>
<th>商品名</th>
<th>數量</th>
<th>單價</th>
<th>總金額</th>
<th>加入時間</th>
<th>刪除</th>
</tr>
</thead>
<tbody>
<tr v-for="(dateil,index) in list" :key="index">
<td><input type="checkbox" class="checkbox" v-model="checked" @click="select(dateil.detailId,dateil.detailProductprice,dateil.detailProductnum)" :value="dateil.detailId" /></td>
<td><a @click="goShop(dateil.detailProductId)" ><img v-bind:src="web_server_static+dateil.product.productPhoto"></a></td>
<td><a @click="goShop(dateil.detailProductId)" >{{dateil.product.productName}}</a></td>
<td>{{dateil.detailProductnum}}</td>
<td>{{dateil.detailProductprice}}</td>
<td>{{dateil.detailProductprice*dateil.detailProductnum}}</td>
<td>{{dateil.detailDatetime}}</td>
<td>
<button type="button" id="but" @click="del(dateil.detailId)" class="btn btn-danger">刪除</button>
</td>
</tr>
</tbody>
</table>
<div v-else >購物車空空如也，請先去購買商品~</div>
<div id="label_btn">
<span><label>已選商品<a>{{count}}</a>件，共</a>￥{{price}}</a>元 數組{{checked}}</label>
</span>
<span><button type="button" id="btn-close" @click="jiesuan()" class="btn btn-danger">結算</button></span>
</div>
<!--結算按鈕-->
</div>
Vue中的數據應該這樣寫
var vue = new Vue({
el: '#a',
data: {
list: [],
checkall: false,
checked: [],
price:0,
count:0,
}
js:
checkAll: function() {
/**
*控制全選反選
*/
var _this = this
//true的時候是全選，false是不選
if(this.checkall) {
// 實現反選，按鈕選中時 實現了反選，列表為空
this.checked = []
this.price=0;
this.count=0;
} else {
// 實現全選
this.price=0;
this.count=0;
this.checked = []
this.list.forEach(function(dateil) {
_this.price+=parseInt(dateil.detailProductprice);
_this.count+=parseInt(dateil.detailProductnum);
_this.checked.push(dateil.detailId)
})
}
if(this.checked.length === this.list.length) {
this.checkall = true
// console.log(this.checkall)
// console.log(this.checked)
}
}
/**
* 當單選框選中時
*/
checkAll: function() {
var _this = this
//true的時候是全選，false是不選
if(this.checkall) {
// 實現反選，按鈕選中時 實現了反選，列表為空
this.checked = []
this.price=0;
this.count=0;
} else {
// 實現全選
this.price=0;
this.count=0;
this.checked = []
this.list.forEach(function(dateil) {
_this.price+=parseInt(dateil.detailProductprice);
_this.count+=parseInt(dateil.detailProductnum);
_this.checked.push(dateil.detailId)
})
}
if(this.checked.length === this.list.length) {
this.checkall = true
// console.log(this.checkall)
// console.log(this.checked)
}
}
這樣一個購物車的全選、單選、與數據的顯示就完成了。
以上所述是小編給大家介紹的Vue實現購物車的全選、單選、顯示商品價格詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
