Vue.js 实现购物车和v-for 实现checkbox复选框全选 - 好文

Vue.js 实现购物车和v-for 实现checkbox复选框全选

1.实现效果

2.代码实现

2.1.html
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></
script> <link rel="stylesheet" type="text/css" href="style.css"> <meta
http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>购物车实例</
title> </head> <body> <div id="app" v-cloak> <template v-if="list.length"> <
table> <thead> <tr> <th><input type="checkbox" @click="checkAll" v-model=
"checkall"></th> <th>商品名称</th> <th>商品单价</th> <th>数量</th> <th>操作</th> </tr> </
thead> <tbody> <tr v-for="(item,index) in list"> <td><input type="checkbox"
v-model="checked" :value="item.id"></td> <td>{{ item.name}}</td> <td>{{
item.price}}</td> <td> <button @click="handleReduce(index)" :disabled=
"item.count ===1">-</button> {{item.count}} <button @click="handleAdd(index)">+
</button> </td> <td><button @click="handleRemove(index)">移除</button></td> </tr>
</tbody> </table> <div>总价：{{ totalPrice }}</div> <div>{{checked}}</div> </
template> <div v-else>购物车为空</div> </div> </body> <script type="text/javascript">
</script> <script src="index.js"></script> </html>
2.2 js部分
var app = new Vue({ el: '#app', data: { list: [ { id: 1, name: 'iPhone 7',
price:16188, count: 1 }, { id: 2, name: 'iPhone 8', price: 16188, count: 1 }, {
id:3, name: 'iPhone X', price: 16188, count: 1 } ], checkall: false, checked:
[] }, computed: { totalPrice:function(){ var total = 0; for(var i=0;i<this
.list.length;i++){var item = this.list[i]; total += item.price * item.count; }
return total.toString().replace(/\B(?=(\d{3})+$)/g,','); } }, methods: {
handleReduce:function(index){ if(this.list[index].count === 1) return; this
.list[index].count--; }, handleAdd:function(index){ this.list[index].count++;
}, handleRemove:function(index){ this.list.splice(index,1); }, checkAll:
function () { var _this = this if (this.checkall) { // 实现反选 this.checked = [] }
else { // 实现全选 this.checked = [] this.list.forEach(function (item) {
_this.checked.push(item.id) }) }if (this.checked.length === this.list.length) {
this.checkall = true // console.log(this.checkall) // console.log(this.checked)
} } } })
2.3 CSS部分
[v-cloak] { display: none; } table{ border: 1px solid #e9e9e9; border-collapse:
collapse; border-spacing: 0; empty-cells: show; } th,td{ padding: 8px 16px;
border: 1px solid #e9e9e9; text-align: left; } th{ background: #f7f7f7; color:
#5c6b77; font-weight: 600; white-space: nowrap; }

热门工具换一换