Vue实现购物车（纯操作数据，不操作dom）注意：自己引入Vue.js哦

y先森

已于 2024-12-10 20:56:07 修改

阅读量264

点赞数 3

文章标签： vue.js 前端 javascript

于 2024-12-10 20:51:57 首次发布

本文链接：https://blog.youkuaiyun.com/yyyyyyysc/article/details/144383387

版权

代码：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script src="../js/Vue.js"></script>
    <style>
      tr {
        display: block;
        border-bottom: 1px dotted #dcdcdc;
      }
      td {
        width: 100px;
        text-align: center;
      }
      img {
        width: 80px;
        height: 80px;
      }
      input {
        width: 30px;
        text-align: center;
      }
      .bottom {
        width: 640px;
        height: 80px;
        line-height: 80px;
        margin-top: 10px;
        border: 1px solid #dcdcdc;
      }
      .qjs {
        width: 80px;
        height: 50px;
        background-color: red;
        color: white;
        font-size: 16px;
        border: 0;
        margin-left: 15px;
      }
      .jq::after {
        content: "￥";
      }
      .xj::after {
        content: "￥";
      }
      .del {
        cursor: pointer;
      }
      .del:hover{
        color: red;
      }
      .alldel {
        padding-left: 16px;
        cursor: pointer;
      }
      .red {
        color: red;
      }
      .alldel:hover {
        color: red;
      }
      .qlc {
        cursor: pointer;
      }
      .qlc:hover {
        color: red;
      }
      .trtop{
        height: 40px;
      }
      .spzj{
        margin-left: 95px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <table class="tabzong">
      <tr class="trtop">
        <td><input type="checkbox" class="allchecked" v-model="allchecked" @click="alltype()"/>全选</td>
        <td>商品</td>
        <td>单价</td>
        <td>商品数量</td>
        <td>小计</td>
        <td>操作</td>
      </tr>
      <tr v-for="(item) in list" :key="item.id">
        <td><input type="checkbox" @click="dx(item)" v-model="item.type"/></td>
        <td>
          <img
            :src=item.src
            alt=""
          />
        </td>
        <td class="jq">{{item.price}}</td>
        <td>
          <button @click="jian(item)" :disabled="item.disabled">-</button
          ><input type="text" :value=item.num /><button @click="jia(item)">+</button>
        </td>
        <td class="xj">{{item.xiaoji}}</td>
        <td class="del" @click="del(item.id)">删除</td>
      </tr>
      
    </table>
      <div class="bottom">
        <span style="margin-right: 30px" class="alldel" @click="alldel()">删除所选商品</span>
        <span class="qlc" @click="alldel()">清理购物车</span>
        <span class="spzj"
          >已经选中<span class="red">{{allshop}}</span>件商品总价:
          <span class="red">{{allnum}}￥</span></span
        >
        <button class="qjs">去结算</button>
      </div>
    </div>
  </body>
  <script>
    let vm = new Vue({
            el:'#app',
            data() {
                return {
                  allchecked:false,
                  allshop:0,
                   list:[{
                      id:1,
                      type:false,
                      disabled:true,

                      src:"https://img.alicdn.com/i2/2204920870409/O1CN01mobmIm1EtMniYVU0J_!!2204920870409.jpg",
                      price:5,
                      num:1,
                      xiaoji:5
                   },
                   {
                      id:2,
                      disabled:true,
                      type:false,
                      src:"https://imgservice.suning.cn/uimg1/b2c/image/gKRneKhFHGnB1oh0Imoxcg.jpg_800w_800h_4e",
                      price:3,
                      num:1,
                      xiaoji:3
                   },
                   {
                      id:3,
                      disabled:true,
                      type:false,
                      src:"https://imgservice.suning.cn/uimg1/b2c/image/ZzNpZsy4U3v8WgTbKqfN3A.jpg_800w_800h_4e",
                      price:10,
                      num:1,
                      xiaoji:10
                   },
                   {
                      id:4,
                      disabled:true,
                      type:false,
                      src:"https://img2.baidu.com/it/u=4280167200,1529131522&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1066",
                      price:20,
                      num:1,
                      xiaoji:20
                   }

                   ]
                  
                }
            },
            // 在这事件处理函数
            methods: {
                dx(arr){
                  this.list.forEach(item=>{
                    if(item.id==arr.id){
                      item.type=!item.type
                      if(arr.type==true){
                        this.allshop++
                      }else{
                        this.allshop--
                      }
                    }
                    
                  })
                  let type =  this.list.every(item=>{
                    return item.type == true
                  })
                  console.log(type);
                  
                  this.allchecked=type
                  
                },
                alltype(){
                  let sum=0
                  this.list.forEach(item=>{
                    item.type=!this.allchecked
                    sum++
                  })
                  if(!this.allchecked){
                      this.allshop=sum
                    }else{
                      this.allshop=0
                    }
                },
                jian(arr){
                   arr.num--
                   arr.xiaoji=arr.num*arr.price
                   if(arr.num>1){
                      arr.disabled=false
                   }else{
                      arr.disabled=true
                   }
                },
                jia(arr){
                   arr.num++
                   arr.xiaoji=arr.num*arr.price

                   if(arr.num>1){
                      arr.disabled=false
                   }
                },
                del(id){
                  let index=this.list.findIndex(item=>{
                    item.id==id
                  })
                  this.list.splice(index,1)
                },
                alldel(){
                     this.list = this.list.filter(item => !item.type);
                },

                
            },
            computed: {
              allnum(){
                let sum=0
                this.list.forEach(item=>{
                   if( item.type==true){
                    sum+=item.xiaoji
                   }
                })
                return sum
            },
            
          }
        })
  </script>
</html>

效果图：