<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style>
table {
border-collapse: collapse;
text-align: center;
margin: 0 auto;
}
tr,
td,
th {
border: 1px solid #333;
width: 100px;
}
</style>
</head>
<body>
<div id="app">
<table>
<thead>
<tr>
<th>选中</th>
<th>图片</th>
<th>单价</th>
<th>个数</th>
<th>小计</th>
<th>操作</th>
</tr>
<tbody>
<tr v-for="item in fruitLists" :key="item.id">
<td><input type="checkbox" name="" id="" v-model="item.isChecked"></td>
<td><img :src="item.icon" alt="" style="width: 100px;"></td>
<td>{{item.price}}</td>
<td><button @click="addNum(item.id)">+</button> {{item.num}} <button
@click="subNum(item.id)">-</button>
</td>
<td>{{item.num * item.price}}</td>
<td><button @click="del(item.id)">删除</button></td>
</tr>
<tr style="text-align: left;">
<td colspan="6"><input type="checkbox" name="" id=""
v-model="isAll">全选 总数：{{totalNum}} 总价：{{totalPrice}}
</td>
</tr>
</tbody>
</thead>
</table>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
fruitLists: JSON.parse(localStorage.getItem('list') || [])
// fruitLists: [
// { id: 1, icon: 'http://autumnfish.cn/static/榴莲.png', isChecked: true, num: 1, price: 200 },
// { id: 2, icon: 'http://autumnfish.cn/static/樱桃.png', isChecked: false, num: 1, price: 100 },
// { id: 3, icon: 'http://autumnfish.cn/static/火龙果.png', isChecked: true, num: 0, price: 100 },
// { id: 4, icon: 'http://autumnfish.cn/static/荔枝.png', isChecked: false, num: 1, price: 100 },
// { id: 5, icon: 'http://autumnfish.cn/static/鸭梨.png', isChecked: true, num: 1, price: 100 },
// ]
},
// 监听：每一次改变fruitLists中的数据都会进行本地存储
watch: {
fruitLists: {
deep: true,
handler(newValue) {
// console.log(newValue);
localStorage.setItem('list', JSON.stringify(this.fruitLists))
}
}
},
methods: {
addNum(id) {
const fruit = this.fruitLists.find(item => item.id === id)
fruit.num++
},
subNum(id) {
const fruit = this.fruitLists.find(item => item.id === id)
if (fruit.num > 0) {
fruit.num--
} else {
return alert('数量不能小于0')
}
},
del(id) {
this.fruitLists = this.fruitLists.filter(item => item.id !== id)
}
},
computed: {
// 总数
totalNum() {
return this.fruitLists.reduce((sum, item) => sum + item.num, 0)
},
// 总价
totalPrice() {
return this.fruitLists.reduce((sum, item) => sum + item.num * item.price, 0)
},
// 全选
isAll: {
get() {
return this.fruitLists.every(item => item.isChecked === true)
},
set(value) {
console.log(value); // true
this.fruitLists.forEach(item => {
item.isChecked = value
});
}
}
},
})
</script>
</body>
</html>
