1.gif

1.data/carts.json

  1. [
  2. {
  3. "isSelected": true,
  4. "productCover": "https://img3.doubanio.com/view/subject/m/public/s33510542.jpg",
  5. "productName": "纸上行舟",
  6. "productInfo": "青年作者黎幺短篇小说首度结集",
  7. "productPrice": 57.33,
  8. "productCount": 3,
  9. "id": "0001"
  10. },
  11. {
  12. "isSelected": true,
  13. "productCover": "https://img3.doubanio.com/view/subject/m/public/s33497735.jpg",
  14. "productName": "我可能得抑郁症了!舟",
  15. "productInfo": "青年作者黎幺短篇小说首度结集",
  16. "productPrice": 54.26,
  17. "productCount": 2,
  18. "id": "0002"
  19. },
  20. {
  21. "isSelected": true,
  22. "productCover": "https://img3.doubanio.com/view/subject/m/public/s33474961.jpg",
  23. "productName": "绕日飞行",
  24. "productInfo": "驯马、飞行、成长、爱情",
  25. "productPrice": 22.67,
  26. "productCount": 3,
  27. "id": "0003"
  28. }
  29. ]

2..html

  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. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>Document</title>
  8. <meta name=referrer content=never>
  9. <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
  10. <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
  11. <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet">
  12. <style>
  13. .img{
  14. width: 30px;
  15. height: 50px;
  16. }
  17. .name{
  18. font-size: 13px;
  19. }
  20. .number{
  21. width: 40px;
  22. }
  23. .delete{
  24. width: 70px;
  25. height: 40px;
  26. border: none;
  27. border-radius: 5px;
  28. }
  29. </style>
  30. </head>
  31. <body>
  32. <div id="app" class="container">
  33. <h2 class="text-center text-success">购物车</h2>
  34. <table class="table table-bordered table-hover">
  35. <thead>
  36. <tr>
  37. <th>全选 <input type="checkbox" v-model="checkAll" @change="change"></th>
  38. <th>商品</th>
  39. <th>单价</th>
  40. <th>数量</th>
  41. <th>小计</th>
  42. <th>操作</th>
  43. </tr>
  44. </thead>
  45. <tbody>
  46. <tr v-for="item of products">
  47. <td> <input type="checkbox" v-model="item.isSelected" @change="handleItem"></td>
  48. <td class="name"><img class="img" :src="item.productCover" alt=""></img>{{item.productName}}</td>
  49. <td>{{item.productPrice}}</td>
  50. <td><input type="number" class="number" min="1" v-model.number="item.productCount"></td>
  51. <td>{{item.productPrice*item.productCount | format(2)}}</td>
  52. <td><button class="delete btn-danger" @click="handleDelete(item)">删除</button></td>
  53. </tr>
  54. </tbody>
  55. </table>
  56. <p class="text-left">总价格:{{sum() | format(2)}}</p>
  57. </div>
  58. <script>
  59. /* ctrl+shift+p */
  60. var vm=new Vue({
  61. el:"#app",
  62. data:{
  63. products:[],
  64. checkAll:false,
  65. check:false,
  66. },
  67. //页面装载时执行
  68. mounted() {
  69. axios.get('./data/carts.json').then(res=>{
  70. return this.products=res.data;
  71. })
  72. this.handleItem() //进入这个函数时就执行一下handleItem()
  73. },
  74. filters:{
  75. /* val就是msg params就是管道修饰符("|")后面函数传递过来的参数*/
  76. format(val,params){
  77. return "$"+val.toFixed(params);
  78. }
  79. },
  80. methods: {
  81. change(){
  82. this.products.forEach(item=>item.isSelected=this.checkAll)
  83. },
  84. handleItem(val){
  85. this.checkAll=this.products.every(item=>item.isSelected)
  86. },
  87. //总价求和
  88. sum(){
  89. var total=0;
  90. this.products.forEach(item=>{
  91. total=item['productPrice']*item['productCount']+total
  92. })
  93. return total
  94. },
  95. //点击删除
  96. handleDelete(item){
  97. var products=this.products.filter(value=>value!==item);
  98. this.products=products
  99. }
  100. },
  101. })
  102. </script>
  103. </body>
  104. </html>

3.使用Go Live查看效果