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 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 }