1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Document</title>
7 <link rel="stylesheet" href="../../css/style.css" />
8 </head>
9 <body>
10 <div id="app" v-cloak>
11 <templete v-if="list.length">
12 <table>
13 <tbody>
14 <!-- 头部 -->
15 <thead>
16 <tr>
17 <th>
18 <input
19 type="checkbox"
20 name="checkAll"
21 v-model="checkList"
22 @click="handleCheck()"
23 />
24 </th>
25 <th></th>
26 <th v-for="title of titles">{{title}}</th>
27 <th>操作</th>
28 </tr>
29 </thead>
30
31 <!-- 内容部分 -->
32 </tbody>
33 <tbody>
34 <tr v-for="(item, index) of list">
35 <td>
36 <input
37 type="checkbox"
38 name="checkItem"
39 :id="item.id"
40 :checked="item.isCheck"
41 @click="handleFlag(index)"
42 />
43 </td>
44 <td>{{index + 1}}</td>
45 <td>{{item.name}}</td>
46 <td>{{item.price}}</td>
47 <td>
48 <button @click="handleReduce(index)" :disabled="item.count===0">
49 -
50 </button>
51 {{item.count}}
52 <button @click="handleAdd(index)">+</button>
53 </td>
54 <td>
55 <button @click="handleRemove(index)">移除</button>
56 </td>
57 </tr>
58 </tbody>
59 </table>
60 <div class="totalPrice">总价：￥ {{ totalPrice }}</div>
61 </templete>
62 <div v-else>
63 购物车为空！
64 </div>
65 </div>
66 <script src="../../js/linkVue.js"></script>
67 <script src="../../js/index.js"></script>
68 </body>
69 </html>
70
71 //-----------------------------------------------------------------------
72
73
74 var app = new Vue({
75 el: '#app',
76 data: {
77 titles: ['商品名称', '商品单价', '购买数量'],
78 checkList: false,
79 flag: false,
80 list: [{
81 id: 1,
82 name: 'iphone7',
83 price: 6188,
84 count: 10,
85 isCheck: false
86 },
87 {
88 id: 2,
89 name: 'Huawei Mate30 Pro',
90 price: 7800,
91 count: 1,
92 isCheck: false
93 },
94 {
95 id: 3,
96 name: 'iPad Pro',
97 price: 6666,
98 count: 0,
99 isCheck: false
100 },
101 {
102 id: 4,
103 name: 'MacBook Pro',
104 price: 24488,
105 count: 5,
106 isCheck: false
107 },
108 ]
109
110 },
111 methods: {
112 handleReduce: function (index) {
113 if (this.list[index].count === 0) return;
114 this.list[index].count -= 1;
115 },
116 handleAdd: function (index) {
117 this.list[index].count += 1;
118 },
119 handleRemove: function (index) {
120 this.list.splice(index, 1);
121 },
122 handleCheck: function () {
123 this.checkList = !this.checkList;
124 if (this.checkList) {
125 for (var i = 0; i < this.list.length; i++) {
126 this.list[i].isCheck = true;
127 };
128 }
129 if (!this.checkList) {
130 for (var j = 0; j < this.list.length; j++) {
131 this.list[j].isCheck = false;
132 };
133 }
134 },
135 handleFlag: function (index) {
136 this.list[index].isCheck = !this.list[index].isCheck;
137 for (var i = 0; i < this.list.length; i++) {
138 if (this.list[i].isCheck === false) {
139 this.checkList = false;
140 break;
141 } else {
142 this.checkList = true;
143 }
144 };
145 }
146 },
147 computed: {
148 totalPrice: function (param) {
149 var total = 0;
150 for (var i = 0; i < this.list.length; i++) {
151 if (this.list[i].isCheck === true) {
152 var item = this.list[i];
153 total += item.price * item.count;
154 }
155 };
156 return total.toString().replace(/\B(?=(\d{3})+$)/g, ',');
157 }
158 }
159 });
160
161 //-----------------------------------------------------------------------
162
163
164 [v-cloak] {
165 display: none;
166 }
167
168 table {
169 width: 600px;
170 margin: 200px auto;
171 border: 1px solid #e9e9e9;
172 border-collapse: collapse;
173 border-spacing: 0;
174 empty-cells: show;
175 }
176
177 th,
178 td {
179 padding: 8px 16px;
180 border: 1px solid #e9e9e9;
181 text-align: left;
182 }
183
184 th {
185 background-color: #f7f7f7;
186 color: #5c6b77;
187 font-weight: 600;
188 white-space: nowrap;
189 }
190
191 .totalPrice {
192 position: relative;
193 left: 50%;
194 color: black;
195 }
