ASCII码 ASCII码

计算属性或侦听器进行改写原生购物车案例

发布于:2022-04-18 15:05:36  栏目:技术文档

HTML

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>完善购物车</title>
  8. <script src="https://unpkg.com/vue@next"></script>
  9. <style>
  10. table {
  11. width: 35em;
  12. text-align: center;
  13. border-collapse: collapse;
  14. }
  15. table caption {
  16. font-size: 1.5em;
  17. margin-bottom: 0.6em;
  18. }
  19. thead {
  20. background-color: lightcyan;
  21. }
  22. th,
  23. td {
  24. border: 1px solid #000;
  25. height: 2em;
  26. }
  27. </style>
  28. </head>
  29. <body>
  30. <div class="app">
  31. <table>
  32. <caption>购物车</caption>
  33. <thead>
  34. <tr>
  35. <th>选择</th>
  36. <th>ID</th>
  37. <th>品名</th>
  38. <th>单价</th>
  39. <th>数量</th>
  40. <th>金额</th>
  41. <th>优惠金额</th>
  42. <th>实付金额</th>
  43. </tr>
  44. </thead>
  45. <tbody>
  46. <tr>
  47. <td><input type="checkbox" checked /></td>
  48. <td>1</td>
  49. <td>牛奶</td>
  50. <td>{{price}}</td>
  51. <td><input type="number" v-model="num" /></td>
  52. <td>{{payAmount}}</td>
  53. <td>{{diffAmount}}</td>
  54. <td>{{disAmount}}</td>
  55. </tr>
  56. <tr>
  57. <td><input type="checkbox" checked /></td>
  58. <td>2</td>
  59. <td>可乐</td>
  60. <td>{{prices}}</td>
  61. <td><input type="number" v-model="nums" /></td>
  62. <td>{{payAmounts}}</td>
  63. <td>{{diffAmounts}}</td>
  64. <td>{{disAmounts}}</td>
  65. </tr>
  66. <tr>
  67. <td><input type="checkbox" checked /></td>
  68. <td>3</td>
  69. <td>雪碧</td>
  70. <td>{{pricer}}</td>
  71. <td><input type="number" v-model="numr" /></td>
  72. <td>{{payAmountr}}</td>
  73. <td>{{diffAmountr}}</td>
  74. <td>{{disAmountr}}</td>
  75. </tr>
  76. <tr>
  77. <td colspan="4">总计:</td>
  78. <td>{{numberAll}}</td>
  79. <td>{{payAmountAll}}</td>
  80. <td>{{diffAmountAll}}</td>
  81. <td>{{disAmountAll}}</td>
  82. </tr>
  83. </tbody>
  84. </table>
  85. <script>
  86. const app = Vue.createApp({
  87. data() {
  88. return {
  89. price: 50,
  90. num: 5,
  91. prices: 80,
  92. nums: 8,
  93. pricer: 80,
  94. numr: 5,
  95. disAmount: 50,
  96. disAmounts: 80,
  97. disAmountr: 80,
  98. diffAmount: 0,
  99. diffAmounts: 0,
  100. diffAmountr: 0,
  101. };
  102. },
  103. computed: {
  104. payAmount() {
  105. return this.price * this.num;
  106. },
  107. payAmounts() {
  108. return this.prices * this.nums;
  109. },
  110. payAmountr() {
  111. return this.pricer * this.numr;
  112. },
  113. numberAll() {
  114. return this.num + this.nums + this.numr;
  115. },
  116. payAmountAll() {
  117. return this.payAmount + this.payAmountr + this.payAmounts;
  118. },
  119. },
  120. watch: {
  121. payAmount(crr) {
  122. switch (true) {
  123. case crr >= 1000 && crr < 2000:
  124. this.disAmount = this.payAmount * 0.9;
  125. break;
  126. case crr >= 2000 && crr < 3000:
  127. this.disAmount = this.payAmount * 0.8;
  128. break;
  129. case crr >= 3000 && crr < 4000:
  130. this.disAmount = this.payAmount * 0.7;
  131. break;
  132. case crr >= 4000 && crr < 5000:
  133. this.disAmount = this.payAmount * 0.6;
  134. break;
  135. case crr >= 5000:
  136. this.disAmount = this.payAmount * 0.5;
  137. break;
  138. default:
  139. this.disAmount = this.payAmount;
  140. }
  141. this.diffAmount = this.payAmount - this.disAmount;
  142. },
  143. payAmounts(crr) {
  144. switch (true) {
  145. case crr >= 1000 && crr < 2000:
  146. this.disAmounts = this.payAmounts * 0.9;
  147. break;
  148. case crr >= 2000 && crr < 3000:
  149. this.disAmounts = this.payAmounts * 0.8;
  150. break;
  151. case crr >= 3000 && crr < 4000:
  152. this.disAmounts = this.payAmounts * 0.7;
  153. break;
  154. case crr >= 4000 && crr < 5000:
  155. this.disAmounts = this.payAmounts * 0.6;
  156. break;
  157. case crr >= 5000:
  158. this.disAmounts = this.payAmounts * 0.5;
  159. break;
  160. default:
  161. this.disAmounts = this.payAmounts;
  162. }
  163. this.diffAmounts = this.payAmounts - this.disAmounts;
  164. },
  165. payAmountr(crr) {
  166. switch (true) {
  167. case crr >= 1000 && crr < 2000:
  168. this.disAmountr = this.payAmountr * 0.9;
  169. break;
  170. case crr >= 2000 && crr < 3000:
  171. this.disAmountr = this.payAmountr * 0.8;
  172. break;
  173. case crr >= 3000 && crr < 4000:
  174. this.disAmountr = this.payAmountr * 0.7;
  175. break;
  176. case crr >= 4000 && crr < 5000:
  177. this.disAmountr = this.payAmountr * 0.6;
  178. break;
  179. case crr >= 5000:
  180. this.disAmountr = this.payAmountr * 0.5;
  181. break;
  182. default:
  183. this.disAmountr = this.payAmountr;
  184. }
  185. this.diffAmountr = this.payAmountr - this.disAmountr;
  186. },
  187. numberAll(crr) {
  188. this.diffAmountAll = this.diffAmount + this.diffAmountr + this.diffAmounts;
  189. this.disAmountAll = this.disAmount + this.disAmountr + this.disAmounts;
  190. },
  191. },
  192. methods: {},
  193. mounted() {
  194. this.num = 1;
  195. this.nums = 1;
  196. this.numr = 1;
  197. },
  198. }).mount(".app");
  199. </script>
  200. </div>
  201. </body>
  202. </html>
相关推荐
阅读 +