<!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>Document</title>
<link rel="stylesheet" href="./bootstrap.css">
<script src="./vue.js"></script>
<style>
img {
width: 80px;
height: 80px;
}
</style>
</head>
<body>
<div id="app" class="container">
<table class="table table-light table-bordered">
<tbody>
<tr>
<td>
<input type="checkbox" v-model="allChecked" @change="changeAll()">全选{{allChecked}}
</td>
<td>商品名称</td>
<td>图片</td>
<td>单价</td>
<td>数量</td>
<td>总价</td>
<td>操作</td>
</tr>
<!-- 3.遍历数据 -->
<tr v-for="(item,index) in goods" :key="item.id">
<td>
<input type="checkbox" v-model="item.checked" @change="changeOne">
</td>
<td>{{item.name}}</td>
<td>
<img :src="item.img" alt="">
</td>
<td>{{item.price.toFixed(2)}}</td>
<td>
<button class="btn btn-default" @click="sub(index)">-</button>
{{item.num}}
<button class="btn btn-primary" @click="add(index)">+</button>
</td>
<td>{{(item.price*item.num).toFixed(2)}}</td>
<td>
<button class="btn btn-danger" @click="del(index)">删除</button>
</td>
</tr>
<tr>
<td>总价</td>
<td colspan="6">{{allPrice}}</td>
</tr>
</tbody>
</table>
</div>
<script>
//假设这是后端返回的数据
let shops = [{
id: 1,
name: "SK2",
price: 1590.00,
num: 1,
img: "http://img13.360buyimg.com/n7/jfs/t1/179804/21/2812/138861/60954151E09f754c1/9706cf7d3f82ce19.jpg"
},
{
id: 2,
name: "watch",
price: 1799.9,
num: 1,
img: "http://img13.360buyimg.com/n7/jfs/t1/195549/7/1383/147340/609247adE3a47f0f5/bf2a9f6dbd18a0d5.jpg"
},
{
id: 3,
name: "前男友面膜",
price: 1059.99,
num: 1,
img: "http://img14.360buyimg.com/n7/jfs/t1/181060/34/2821/163555/60954cddE1af45f9c/8f7e11f4fc884da8.jpg"
},
{
id: 4,
name: "ipad",
price: 5799,
num: 1,
img: "http://img11.360buyimg.com/n7/jfs/t1/161452/24/15900/88869/6063ddfeE258a392b/008f0f5fdb2c4a42.jpg"
}
]
new Vue({
el: "#app",
data: {
//1.初始化数据
goods: [],
allChecked: false
},
mounted() {
// 2.请数据
//给数组每条数据加一个字段checked 表示自己有没有被选中
// 从后端取回来的数据，可以先操作，再赋值
shops.forEach(item => {
item.checked = false
})
this.goods = shops;
},
methods: {
//4。数量自增
add(index) {
this.goods[index].num++;
this.goods[index].num = Math.min(this.goods[index].num, 3)
/*2 3-->2
5 3-->3
n 3-->Math.min(n,3)*/
},
//5.数量自减
sub(index) {
this.goods[index].num--;
/*
if(this.goods[index].num<=1){
this.goods[index].num=1;
}*/
// this.goods[index].num=this.goods[index].num<=1?1:this.goods[index].num;
/*
2 1 -->2
0 1-->1
n 1-->Math.max(n,1)
*/
this.goods[index].num = Math.max(this.goods[index].num, 1)
},
//6.删除
del(index) {
this.goods.splice(index, 1)
},
//7.点了全选
changeAll() {
this.goods.forEach(item => {
item.checked = this.allChecked;
})
},
//8.点了某一个
changeOne() {
// 所有的checked都是true,allChecked就是true;
// 只要有1个是假的，整体就是假的
this.allChecked = this.goods.every(item => item.checked);
}
},
computed: {
// 9.总价
allPrice() {
// 1. forEach
/*
let sum=0;
this.goods.forEach(item=>{
if(item.checked){
sum+=item.price*item.num
}
})
return sum;
*/
//2.map
/* let sum=0;
let arr= this.goods.map(item=>{
if(item.checked){
sum+=item.price*item.num
}
return item.name
})
return sum;
*/
/*3.先过滤，再循环
let arr = this.goods.filter(item => item.checked)
let sum = 0;
arr.forEach(item => {
sum += item.price * item.num
})
return sum;
*/
//语法
/*let arr=[1,2,3,5]
let a=arr.reduce((val,item)=>{
val=val+item
return val
},0)*/
/* reduce
return this.goods.reduce((val,item,index,arr)=>{
if(item.checked){
val+=item.price*item.num
return val;
}else{
return val
}
},0)*/
return this.goods.reduce((val, item) => item.checked ? val += item.price * item.num : val,
0)
}
}
})
</script>
</body>
</html>
