Vue.js实战实现一个可以勾选产品的购物车

2022-09-28 11:52:24
  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 }
码农公寓

相关文章
