<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0 auto;
padding: 0;
}
table {
width: 600px;
text-align: center;
}
img {
width: 30px;
height: 30px;
}
.bottom {
width: 600px;
}
</style>
</head>
<body>
<div id="app">
<table frame="box" rules="rows">
<tr>
<th><input type="checkbox" @click="selectAll">全选</th>
<th>商品信息</th>
<th>单价（元）</th>
<th>数量</th>
<th>小计（元）</th>
<th>操作</th>
</tr>
<tr v-for="(item,index) in info">
<td><input type="checkbox" v-model="item.checked"></td>
<td><img :src="item.img">{{item.message}}</td>
<td>{{item.price}}</td>
<td>
<button @click="reduce(index)">-</button>
{{item.num}}
<button @click="add(index)">+</button>
</td>
<td>{{item.price*item.num}}</td>
<td><button @click="del(index)">删除</button></td>
</tr>
</table>
<div class="bottom">
<input type="checkbox" @click="selectAll" />全选
<span style="margin-left:320px;margin-top: 0px;">总共<span style="color: red;">{{num}}</span>件商品</span>
<span>总共<span style="color: red;">{{res}}</span>元</span>
<button type="button" style="background-color: gray;color: white;">去结算</button>
</div>
</div>
</body>
</html>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
var vue = new Vue({
el: "#app",
data: {
info: [{
img: "./img/1.png",
message: "夏季纯棉短袖男士宽松",
price: 49,
num: 1,
checked: false
},
{
img: "./img/1.png",
message: "夏季纯棉短袖男士宽松",
price: 49,
num: 1,
checked: false
},
{
img: "./img/1.png",
message: "夏季纯棉短袖男士宽松",
price: 49,
num: 1,
checked: false
},
]
},
methods: {
// 购物车中商品删除功能
del: function(index) {
// 点击按钮时，弹出询问框，提示“是否将商品移除购物车？”
if (confirm("是否将商品移除购物车？")) {
// 点击确定将该行商品在列表中删除
this.info.splice(index, 1)
}
},
// 数量减少给 - 按钮绑定事件
// 购物车中每个商品最终数量最少购买1件商品
reduce: function(index) {
if (this.info[index]["num"] > 1) {
// 点击 - 实现商品数量-1
this.info[index]["num"]--
return false
}
alert("数量最少购买1件商品")
},
// 数量增加给 + 按钮绑定事件
// 购物车中每个商品增加数量不能超过5件商品
add: function(index) {
if (this.info[index]["num"] < 5) {
// 点击 + 实现商品数量+1
this.info[index]["num"]++
return false
}
alert("数量不能超过5件商品")
},
// 实现全选、反选功能
// 给复选框绑定事件
// 点击可实现列表商品全选功能再次点击可实现列表反选功能
selectAll: function() {
this.info.map(function(item, index) {
if (item.checked == true) {
item.checked = false
return false
}
item.checked = true
})
}
},
computed: {
// 数量获取选中的商品数量
// 商品数量展示在右下角总共几件商品
num() {
var sum = 0;
this.info.map(function(item, index) {
if (item.checked == true) {
sum += item.num
}
})
return sum
},
// 总金额
// 选中的商品，计算出总价格
res() {
var sum = 0;
this.info.map(function(item, index) {
if (item.checked == true) {
sum += item.num * item.price
}
})
return sum
},
}
})
</script>