整段代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>checked复选框测试(购物车)</title>
<style type="text/css">
.books {
border: none;
border-collapse: collapse;
}
th,
td {
border: 1px solid #DDDDDD;
padding: 10px;
width: 50px;
text-align: center;
}
th:nth-child(2),
td:nth-child(2) {
width: 200px;
}
.btn-clear {
padding: 2px 15px;
border: 1px solid #DDDDDD;
margin: 20px;
outline: none;
background-color: rgba(9, 120, 78, 0.7);
color: white;
}
.btn-del {
border: none;
background: transparent;
outline: none;
}
td:last-child:hover {
cursor: pointer;
background-color: #DDDDDD;
}
</style>
</head>
<body>
<div id="app">
<div class="bookList" v-if="books.length>0">
<table border="none" class="books">
<tr>
<th>
<input type="checkbox" v-model="checkedAll" @change="checkAll" />
</th>
<th>书名</th>
<th>价格</th>
<th>页数</th>
<th>操作</th>
</tr>
<tr v-for="(item,index) in books" :key="index">
<td>
<input type="checkbox" v-model="item.checked" @change="itemChange(index)" />
</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.pages}}</td>
<td>
<button class="btn btn-del" @click="delBook(index)">删除</button>
</td>
</tr>
</table>
<div class="sumMsg">
<button class="btn btn-clear" @click="clear">清空</button>
<span>商品总价为:{{sumPrice}}</span>
</div>
</div>
<div class="empty" v-else>
购物车为空
</div>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el: '#app',
data: {
checkedAll: false,
books: [{
name: 'JAVA编程',
price: 188,
pages: 200,
checked: false
},
{
name: 'C++编程',
price: 108,
pages: 120,
checked: false
},
{
name: 'Python编程',
price: 118,
pages: 220,
checked: false
},
{
name: 'Vue编程',
price: 98,
pages: 240,
checked: true
}
]
},
methods: {
checkAll() {
this.books.forEach(item => {
item.checked = this.checkedAll
})
},
itemChange(index) {
const preCheckedAll = this.checkedAll
if (!this.books[index].checked) {
this.checkedAll = false
} else {
this.checkedAll=!this.books.some(item => !item.checked)
}
},
delBook(index) {
this.books.splice(index, 1)
},
clear() {
this.books.splice(0)
}
},
computed: {
sumPrice() {
let sumPrice = 0
this.books.forEach(item => {
if (item.checked) {
sumPrice += item.price
}
})
return sumPrice
}
}
})
</script>
</body>
</html>
页面显示效果
实现内容
1.全选/全不选
2.计算已选商品总价
3.删除指定商品
4.清空购物车
效果
