欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

VUE3学习,购物车结算练习

程序员文章站 2022-03-13 15:36:42
...

购物车效果如下

VUE3学习,购物车结算练习

  1. <template>
  2. <div>
  3. <table>
  4. <caption>购物车</caption>
  5. <tr>
  6. <th>全选 <input type="checkbox" @change="checkAll()" v-model="myChecked"></th>
  7. <th>编号</th>
  8. <th>商品名称</th>
  9. <th>价格</th>
  10. <th>购物数量</th>
  11. <th>操作</th>
  12. </tr>
  13. <tr v-for="(value,key) in goods" key="key">
  14. <td style="text-align: center"><input type="checkbox" v-model="value.checkbox" @change="check()"></td>
  15. <td>{{value.id}}</td>
  16. <td>{{value.name}}</td>
  17. <td>¥:{{value.price}}</td>
  18. <td class="d-flex just-btw al-cent">
  19. <!-- <div class="div-fang div-jian" @click="value.count&#45;&#45;" :disabled="value.count<=1">-</div>-->
  20. <button class="div-fang div-jian" @click="value.count--" :disabled="value.count<=0">-</button>
  21. <input type="text" size="1" class="border-none out-line" style="width: 18px" :value="value.count" :v-model="value.count">
  22. <!-- <div class="div-fang div-add" @click="value.count++">+</div>-->
  23. <button class="div-fang div-add" @click="value.count++">+</button>
  24. </td>
  25. <td style="text-align: center"><a href="" @click.prevent="del(key)">删除</a> </td>
  26. </tr>
  27. <tr>
  28. <td colspan="3" style="text-align: right">合计:</td>
  29. <td colspan="3">{{totalPrice}}</td>
  30. </tr>
  31. </table>
  32. </div>
  33. <div style="margin-top: 20px ;border:1px solid #dbdbdb;width: 300px;height: 200px">
  34. <p style="font-size: 18px;text-align: center;font-weight: bold">添加商品</p>
  35. <span>商品名称:</span><input type="text" v-model="goodsName"><br>
  36. <span>商品价格:</span><input type="text" v-model="goodsPrice"><br>
  37. <span>库存数量:</span><input type="text"><br>
  38. <button style="margin: 20px;border: 1px solid #666" @click="addGoods()" >添加</button>
  39. </div>
  40. </template>
  41. <script>
  42. export default {
  43. name:"App",
  44. data(){
  45. return{
  46. goods:[
  47. {id:1, checkbox:false, name:'《细说PHP》', price:10, count:0},
  48. {id:2, checkbox:false, name:'《细说网页制作》', price:10, count:0},
  49. {id:3, checkbox:false, name:'《细说JavaScript语言》', price:10, count:0},
  50. {id:4, checkbox:false, name:'《细说DOM和BOM》', price:10, count:0},
  51. {id:5, checkbox:false, name:'《细说Ajax与jQuery》', price:10, count:0},
  52. {id:6, checkbox:false, name:'《细说HTML5高级API》', price:10, count:0}
  53. ],
  54. myChecked:false,
  55. goodsName:"",
  56. goodsPrice:0
  57. }
  58. },
  59. computed:{
  60. totalPrice:{
  61. get(){
  62. let sum=0;
  63. for (let i=0;i<this.goods.length;i++){
  64. if (this.goods[i].checkbox==true){
  65. sum +=this.goods[i].price*this.goods[i].count;
  66. }
  67. }
  68. return sum
  69. }
  70. }
  71. },
  72. methods:{
  73. check(){
  74. // for (let i=0;i<this.goods.length;i++){
  75. // if (this.goods[i].checkbox==true){
  76. // this.sum=this.goods.reduce((s,n)=>s+n)
  77. // return this.sum
  78. // }
  79. // }
  80. },
  81. checkAll(){
  82. for (let i=0;i<this.goods.length;i++){
  83. this.goods[i].checkbox=this.myChecked
  84. }
  85. }
  86. ,
  87. minus(){
  88. },
  89. addGoods(){
  90. this.goods.push({id:this.goods.length+1,name: this.goodsName,price:this.goodsPrice,checkbox: false,count: 0})
  91. },
  92. del(key){
  93. this.goods.splice(key,1)
  94. }
  95. }
  96. }
  97. </script>
  98. <style scoped>
  99. *{
  100. margin: 0px;
  101. padding: 0px;
  102. }
  103. table,th,td,tr{
  104. border-collapse: collapse;
  105. border: 1px solid #333;
  106. }
  107. tr{
  108. height: 25px;
  109. }
  110. td,th{
  111. width: 200px;
  112. height: 22px;
  113. }
  114. tr>td:first-child,tr>th:first-child{
  115. width: 60px;
  116. }
  117. tr>td:nth-child(2),tr>th:nth-child(2){
  118. width: 80px;
  119. text-align: center;
  120. }
  121. tr>td:nth-child(4),tr>th:nth-child(4){
  122. width: 120px;
  123. }
  124. tr>td:nth-child(5),tr>th:nth-child(5){
  125. width: 100px;
  126. text-align: center;
  127. }
  128. tr>td:last-child,tr>th:last-child{
  129. width: 80px;
  130. }
  131. .d-flex{
  132. display: flex;
  133. position: relative;
  134. }
  135. .just-btw{
  136. justify-content: space-around;
  137. }
  138. .al-cent{
  139. align-items: center;
  140. }
  141. .div-fang{
  142. border: 1px solid #666;
  143. width: 18px;
  144. height: 18px;
  145. position: absolute;
  146. cursor: pointer;
  147. text-align: center;
  148. }
  149. .div-jian{
  150. left: 18px;
  151. }
  152. .div-add{
  153. right: 18px;
  154. }
  155. .border-none{
  156. border: none;
  157. /*border-bottom: 1px solid #333;*/
  158. }
  159. .out-line{
  160. outline: none;
  161. }
  162. .pad-l-r-10{
  163. padding-left: 18px;
  164. padding-right: 18px;
  165. }
  166. </style>