vue写购物车

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  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. </head>
  10. <style>
  11.     .box {
  12.         width: 22em;
  13.         height: 2em;
  14.     }
  16.     .list>li {
  17.         height: 1.6em;
  18.         background-color: #efefef;
  19.         display: grid;
  20.         grid-template-columns: repeat(5, 3em);
  21.         gap: 1em;
  22.         place-items: center right;
  23.         border-bottom: 1px solid #ccc;
  24.     }
  26.     .list>li:first-of-type {
  27.         background-color: lightseagreen;
  28.         color: white;
  29.     }
  31.     .list>li:hover:not(:first-of-type) {
  32.         cursor: pointer;
  33.         background-color: lightcyan;
  34.     }
  36.     .list>li input[type='number'] {
  37.         width: 3em;
  38.         border: none;
  39.         outline: none;
  40.         text-align: center;
  41.         font-size: 1em;
  42.         background-color: transparent;
  43.     }
  45.     .list>li:last-of-type span.total-num,
  46.     .list>li:last-of-type span.total-amount {
  47.         grid-column: span 2;
  48.         place-self: center right;
  49.         color: lightseagreen;
  50.     }
  52.     .account {
  53.         float: right;
  54.         background-color: lightseagreen;
  55.         color: white;
  56.         border: none;
  57.         outline: none;
  58.         width: 4.5em;
  59.         height: 1.8em;
  60.     }
  62.     .account:hover {
  63.         background-color: coral;
  64.         cursor: pointer;
  65.     }
  66. </style>
  68. <body>
  69.     <div class="app">
  70.         <div class="box">
  71.             <div class="selectAll">
  72.                 <!-- checkAll(): 当全选按钮的状态发生变化化,触发该事件 change  -->
  73.                 <input type="checkbox" class="check-all" name="check-all" @change="checkAll($event)" checked />
  74.                 <label for="check-all">全选</label>
  75.             </div>
  76.             <ul class="list">
  77.                 <li><span>选择</span><span>品名</span><span>数量</span><span>单价</span><span>金额</span></li>
  78.                 <li>
  79.                     <input type="checkbox" @change="checkItems($event)" checked />
  80.                     <span class="content">手机</span>
  81.                     <input type="number" min="1" v-model="number1" />
  82.                     <span class="price">{{price1}}</span>
  83.                     <span class="amount1">{{payAmount1}}</span>
  84.                 </li>
  85.                 <li>
  86.                     <input type="checkbox" @change="checkItems($event)" checked />
  87.                     <span class="content">电脑</span>
  88.                     <input type="number" min="1" v-model="number2" />
  89.                     <span class="price">{{price2}}</span>
  90.                     <span class="amount">{{payAmount2}}</span>
  91.                 </li>
  92.                 <li>
  93.                     <input type="checkbox" @change="checkItems($event)" checked />
  94.                     <span class="content">相机</span>
  95.                     <input type="number" min="1" v-model="number3" />
  96.                     <span class="price">{{price3}}</span>
  97.                     <span class="amount">{{payAmount3}}</span>
  98.                 </li>
  99.                 <li>
  100.                     <span>总计:</span>
  101.                     <span class="total-num">{{totalNum}}</span>
  102.                     <span class="total-amount">{{totalAmount}}<span>
  103.                 </li>
  104.             </ul>
  105.             <button class="account">结算</button>
  106.         </div>
  107.     </div>
  110. </body>
  111. <script>
  112.     const app = Vue.createApp({
  113.         data() {
  114.             return {
  115.                 number1: 0,
  116.                 price1: 100,
  117.                 number2: 0,
  118.                 price2: 200,
  119.                 number3: 0,
  120.                 price3: 300,
  121.             }
  122.         },
  123.         //计算器属性
  124.         computed: {
  125.             payAmount1() {
  126.                 return this.number1 * this.price1;
  127.             },
  128.             payAmount2() {
  129.                 return this.number2 * this.price2;
  130.             },
  132.             payAmount3() {
  133.                 return this.number3 * this.price3;
  134.             },
  135.             totalNum() {
  137.                 return this.number1 + this.number2 + this.number3;
  138.                 // return jieguo;
  139.             },
  140.             totalAmount() {
  141.                 return this.payAmount1 + this.payAmount2 + this.payAmount3
  142.             }
  143.         },
  144.         //侦听器属性
  145.         watch: {
  148.         },
  149.         methods: {
  150.             //全选
  151.             checkAll(ev) {
  152.                 let checkArr = document.querySelectorAll(
  153.                     '.list li input[type="checkbox"]'
  154.                 );
  155.                 let status = ev.target.checked;
  156.                 checkArr.forEach((item) => (item.checked = status))
  157.                 if (status) {
  158.                     this.number1 = 1;
  159.                     this.number2 = 1;
  160.                     this.number3 = 1;
  161.                 }else{
  162.                     this.number1 = 0;
  163.                     this.number2 = 0;
  164.                     this.number3 = 0;
  165.                 }
  166.             },
  167.             //单选
  168.             checkItems(ev) {
  169.                 let checkArr = document.querySelectorAll(
  170.                     '.list li input[type="checkbox"]'
  171.                 );
  172.                 let check = document.querySelector(
  173.                     '.selectAll input'
  174.                 );
  175.                 console.log('下面的三个按钮的数组', checkArr);
  176.                 console.log('全选那一个按钮', check);
  177.                 check.checked = [...checkArr].every((item) => (item.checked));
  179.                 let numbers = document.querySelectorAll(
  180.                     '.list li input[type="number"]'
  181.                 );
  183.             },
  186.         }
  187.     }).mount('.app');
  188. </script>
  190. </html>