實現購物車商品單選、全選及商品數量和總價計算，供大家參考，具體內容如下

效果展示

HTML

<template>
 <div class="buyCar">
  <header-bar
   title="購物車商品"
   :show-line="true"
  />
  <div class="content">
   <table>
    <thead>
     <tr>
      <th>商品總數: {{ total }}</th>
      <th>商品總價: {{ totalPrice }}</th>
      <th>
       <input
        v-model="AllChecked"
        type="checkbox"
        @click="checkAll"
       >
       全選
      </th>
     </tr>
    </thead>
    <tbody>
     <tr
      v-for="(item,index) in list"
      :key="index"
     >
      <td>{{ item.name }}</td>
      <td>單價: {{ item.price }}</td>
      <td>
       <input
   aNdYKsZa
 
     v-model="item.isChecked"
        type="checkbox"
        @click="check(item)"
       >
      </td>
     </tr>
    </tbody>
   </table>
  </div>
 </div>
</template>

<script>
import Heahttp://www.cppcns.comderBar from '../components/header/index.vue';

export default {
 name: 'BuyCar',components: {
  HeaderBar,},data() {
  return {
   list: [
    {
     name: '商品1',price: 1111,isChecked: false,{
     name: '商品2',price: 2222,{
     name: '商品3',price: 3333,{
     name: '商品4',price: 4444,{
     name: '商品5',price: 5555,],total: 0,// 是否已全選
   AllChecked: false,};
 },computed: {
  towww.cppcns.com
 
talPrice() {
   let prices = 0;
   this.list.forEach(item => {
    if (item.isChecked) {
     prices += item.price;
    }
   });
   return prices;
  },methods: {
  // 單選
  check(item) {
   if (!item.isChecked) {
    this.total++;
   } else {
    this.total--;
   }
   this.AllChecked = this.total === this.list.length;
 
 
 },// 全選和反選
  checkAll() {
   const AllChecked = this.AllChecked;
   this.list.forEach(item => {
    item.isChecked = !AllChecked;
   });
   this.AllChecked =www.cppcns.com !this.AllChecked;
   this.total = this.AllChecked ? this.list.length : 0;
  },};
</script>

<style lang="less" scoped>
.buyCar {
 height: 100%;
 display: flex;
 flex-direction: column;
 .content {
  height: calc(100vh);
  padding: 45px 15px 15px;
  table {
   text-align: center;
   border-collapse: collapse;
   border-spacing: 0;
  }
  td,th {
   width: 200px;
   height: 20px;
   border: 1px solid #000;
  }
  input {
   width: 20px;
   height: 20px;
  }
 }
}
</style>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。