实现需求：
实现一个简易的购物车，页面的表格展示data数据中的一个数组对象，并提供选中商品和全选商品checkbox复选框，页面实时显示选中商品的总金额：
分析：
1：使用v-for循环渲染arraylist对象；
2：使用computed计算属性计算总价；
3：使用computed计算全选复选框是否应该被选中（商品列表如果都被勾选，则设置全选复选框的状态为选中，否则设置全选复选框状态为取消选中）；
4：根据数组中元素的初始选中状态，设置页面商品复选框是否选中。
代码实现：
使用html文件作为页面显示，引入js文件，Vue代码写在index.js中，页面样式保存在style.css中。
HTML：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset=utf-8>
5 <title>Test page</title>
6 <link rel="stylesheet" type="text/css" href="style.css">
7 </head>
8 <body>
9 <div id="app" v-cloak>
10 <template v-if=‘list.length‘>
11 <table>
12 <thead>
13 <tr>
14 <th>
15 <input type="checkbox" v-model="checkAll" :checked="checkAll" @change="handleCheckAll">选择
16 </th>
17 <th></th>
18 <th>商品名称</th>
19 <th>商品单价</th>
20 <th>购买数量</th>
21 <th>操作</th>
22 </tr>
23 </thead>
24 <tbody>
25 <tr v-for=‘(item, index) in list‘>
26 <td>
27 <input type="checkbox" v-model="item.checked" :checked="item.checked">
28 </td>
29 <td>{{index + 1}}</td>
30 <td>{{item.name}}</td>
31 <td>{{item.price}}</td>
32 <td>
33 <button :disabled=‘item.count === 1‘ @click=‘handleReduce(index)‘>-</button>
34 {{item.count}}
35 <button @click=‘handleAdd(index)‘>+</button>
36 </td>
37 <td>
38 <button @click=‘handleRemove(index)‘>移除</button>
39 </td>
40 </tr>
41 </tbody>
42 </table>
43 <div>总价: {{totalPrice}}</div>
44 </template>
45 <div v-else>购物车为空</div>
46
47 </div>
48
49 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
50 <script src="index.js"></script>
51 </body>
52 </html>
index.js
1 var app = new Vue({
2 el: ‘#app‘,
3 data: {
4 list: [
5 {
6 id: 1,
7 name: ‘iPhone 7‘,
8 price: 6188,
9 count: 1,
10 checked: false
11 },
12 {
13 id: 2,
14 name: ‘iPad Pro‘,
15 price: 5888,
16 count: 1,
17 checked: true
18 },
19 {
20 id: 3,
21 name: ‘Macbook Pro‘,
22 price: 21488,
23 count: 1,
24 checked: false
25 }
26 ]
27 },
28 computed: {
29 totalPrice: function () {
30 var total = 0;
31 for (var i = 0; i < this.list.length; i++) {
32 total += this.list[i].checked ? this.list[i].price * this.list[i].count : 0;
33 }
34 return total.toString().replace(/\B(?=(\d{3})+$)/g, ‘,‘);
35 },
36 checkAll: {
37 get() {
38 var result = true;
39 for (var i = 0; i < this.list.length; i++) {
40 if (!this.list[i].checked)
41 result = false;
42 }
43 return result;
44 },
45 set(val) {
46 for (var i = 0; i < this.list.length; i++) {
47 this.list[i].checked = val;
48 }
49 }
50 }
51 },
52 methods: {
53 handleReduce: function (index) {
54 if (this.list[index].count === 1) return;
55 this.list[index].count--;
56 },
57
58 handleAdd: function (index) {
59 this.list[index].count++;
60 },
61
62 handleRemove: function (index) {
63 this.list.splice(index, 1);
64 },
65
66 handleCheckAll: function () {
67 var setCheck = this.checkAll;
68 for (var i = 0; i < this.list.length; i++) {
69 var tmpObj = this.list[i];
70 tmpObj.checked = setCheck;
71 this.$set(this.list, i, tmpObj);
72 }
73 }
74 }
75 })
style.css
1 [v-cloak]{
2 display: none;
3 }
4
5 table {
6 border: 1px solid #e9e9e9;
7 border-collapse: collapse;
8 border-spacing: 0px;
9 empty-cells: show;
10 }
11
12 th, td{
13 padding: 8px 16px;
14 border: 1px solid #e9e9e9;
15 text-align: left;
16 }
17
18 th{
19 background: #f7f7f7;
20 color: #5c6b77;
21 font-weight: 600;
22 white-space: nowrap;
23 }
原文地址：https://www.cnblogs.com/zheng-hong-bo/p/12253055.html
时间： 2024-11-13 18:39:58