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

vue 简单使用

程序员文章站 2022-03-13 12:48:48
...
  1. <template>
  2. <div v-if="cartList.length <= 0"> 购物车中没有商品</div>
  3. <div v-else>
  4. <table class="table">
  5. <tr>
  6. <th>选择</th>
  7. <th>编号</th>
  8. <th>名称</th>
  9. <th>价格</th>
  10. <th>购买数量</th>
  11. <th>操作</th>
  12. </tr>
  13. <tr v-for="(cart,index) in cartList" :key="index" >
  14. <td>
  15. <input type="checkbox" name="ids" :id="'id'+cart.id" :value="cart.id" v-model="ids" >
  16. </td>
  17. <td>{{cart.id}}</td>
  18. <td>{{cart.name}}</td>
  19. <td>{{cart.price.toFixed(2)}}</td>
  20. <td>
  21. <button @click="jian(cart.id,cart.price)">-</button>
  22. {{cart.count}}
  23. <button @click="jia(cart.id,cart.price)">+</button>
  24. </td>
  25. <td><a href="" @click.prevent="del(cart.id)" >删除</a> </td>
  26. </tr>
  27. <tr>
  28. <td colspan="3">合计</td>
  29. <td colspan="3">¥:{{getTotalPrice}}元</td>
  30. </tr>
  31. </table>
  32. </div>
  33. </template>
  34. <script>
  35. export default {
  36. name: 'App',
  37. data(){
  38. return {
  39. ids:[],
  40. amount:0,
  41. cartList:[
  42. {id:1,name:'aaa',price:1.10,count:1},
  43. {id:2,name:'bbb',price:2.20,count:1},
  44. {id:3,name:'ccc',price:3.30,count:1},
  45. {id:4,name:'ddd',price:4.40,count:1},
  46. {id:5,name:'eee',price:5.50,count:1}
  47. ]
  48. }
  49. },
  50. methods:{
  51. del(id){
  52. let _this = this;
  53. for(let i=0;i<_this.cartList.length;i++){
  54. if(id===_this.cartList[i].id){
  55. _this.cartList.splice(i,1);
  56. }
  57. }
  58. },
  59. jia(id){
  60. let _this = this;
  61. let cartList = _this.cartList;
  62. for(let i=0;i<cartList.length;i++){
  63. if(id===cartList[i].id){
  64. cartList[i].count++;
  65. }
  66. }
  67. },
  68. jian(id){
  69. let _this = this;
  70. let cartList = _this.cartList
  71. for(let i=0;i<cartList.length;i++){
  72. if(id===cartList[i].id){
  73. cartList[i].count--
  74. if(cartList[i].count <= 0){
  75. cartList[i].count=0;
  76. }
  77. }
  78. }
  79. }
  80. },
  81. computed:{
  82. getTotalPrice:{
  83. get(){
  84. let _this= this;
  85. let price= 0;
  86. if(_this.ids.length>0){
  87. for (let i =0;i<_this.ids.length;i++){
  88. for(let j=0;j<_this.cartList.length;j++){
  89. if(_this.ids[i]===_this.cartList[j].id){
  90. price += (_this.cartList[j].price * _this.cartList[j].count)
  91. }
  92. }
  93. }
  94. }
  95. _this.amount=price;
  96. return _this.amount.toFixed(2);
  97. }
  98. }
  99. }
  100. }
  101. </script>
  102. <style>
  103. .table,tr,td,th{
  104. border: 1px solid black;
  105. border-spacing: 0;
  106. }
  107. </style>