<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./vue/vue.js"></script>
<link href="./css/bootstrap.css" rel="stylesheet">
<style>
</style>
</head>
<body>
<div id="app">
<div class="row justify-content-center">
<div class="col-6">
<div id="top" style="margin-top:150px;text-align: center">
<!-- <button class="btn btn-danger " @click="handleLoad">加载购物车</button>-->
</div>
<h1 style="text-align: center">购物车</h1>
<table class="table" style="text-align: center;">
<thead>
<tr class="table-info">
<th scope="col">商品ID</th>
<th scope="col">名字</th>
<th scope="col">价格</th>
<th scope="col">数量</th>
<th scope="col">全选/全不选 <input type="checkbox" v-model="checkAll"
@change="handleCheckAll"></th>
<th scope="col">删除</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in good_list" :class="index%2==0?'table-primary':'table-dark'" >
<th scope="row">{{item.id}}</th>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td><span class="btn" style="color:#ffffff;font-size: 30px" @click="handleminus(item)">-</span>
<input type="text" v-model="item.count" >
<span class="btn" style="color:#ffffff;font-size: 30px" @click="handleAdd(item)">+</span></td>
<td><input type="checkbox"
:value="item"
v-model="checkGoods"
@change="handlecheckOne"
style="margin-left: 25px;margin-top:20px"></td>
<td><button class="btn btn-danger" style="margin-top:10px" @click="handleDelete(item)">删除</button></td>
</tr>
</tbody>
</table>
<br>已选:{{checkGoods}}
<br>总共:{{getPrice()}}
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
good_list: [
{id: 1, name: '手机', price: 1000, count: 1},
{id: 2, name: '书包', price: 2000, count: 2},
{id: 3, name: '电脑', price: 3000, count: 3},
{id: 4, name: '洗衣机', price: 4000, count: 4},
],
checkGoods: [],
checkAll: false
},
methods: {
getPrice() {
let total = 0
for (let item of this.checkGoods) {
total += item.price * item.count
}
return total
},
handleCheckAll() {
if (this.checkAll) {
this.checkGoods = this.good_list
} else {
this.checkGoods = []
}
},
handlecheckOne(){
if(this.checkGoods.length==this.good_list.length){
this.checkAll=true
}else{
this.checkAll=false
}
},
handleAdd(item){
item.count++
},
handleminus(item){
if(item.count>1){
item.count--
}else{
alert('不能再少了')
}
},
handleDelete(item){
let index = this.good_list.indexOf(item)
this.good_list.splice(index,1)
}
}
})
</script>
</html>
浙公网安备 33010602011771号