vue实现商品多选功能

2024-04-02 19:04:59 818人浏览泡泡鱼

摘要

本文实例为大家分享了Vue实现商品多选功能的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang="en"> <he

本文实例为大家分享了Vue实现商品多选功能的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta Http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue实现实现全选，结算</title>
</head>
<style>
    *{
      margin: 0;
      padding: 0;
      list-style: none;
    }
  #app{
    width: 80%;
    margin: auto;
  }
  .wrap{
    width: 100%;
    margin: auto;
  }
  .shangjia{
    font-size: 20;
    font-weight: bold;
    color: #000;
    height: 36px;
    line-height: 36px;
  }
  .checked_inpu{
    margin-right: 10px;
    margin-left: 10px;
  }
  .all_list{
    padding-top: 10px;
    width: 100%;
    margin: auto;
    background: #bbb;
  }
 .list_item{
   width: 80%;
   display: flex;
   justify-content: flex-start;
   position: relative;
   margin: 3px 0;
   padding: 6px 0;
 }
 img{
   display: inline-block;
 }
 .list_box{
   display: inline-block;
 }
.list_img_tit_price{
  display:inline-flex;
  align-content:space-between;
}
.list_img{
  width: 100px;
  height: 100px;
}
.list_tit_price{
  display: flex;
  flex-flow: column;
  margin-left:10px;
  font-size: 16px;
  justify-content: space-between;
}
.total{
  display:inline-flex;
  flex-wrap: row;
  float: right;
  margin-top: 60px;
  margin-left: 20px;
}
.num_cancle,
.num_add
{
   font-size: 20px;
   font-weight: bolder;
   margin:0 2px;
   padding: 1PX;
   line-height: 36px;
}
.num_cancle:hover,
.num_add:hover{
  cursor: pointer;
}
.num_total{
  width:30px;
  text-align: center;
  font-weight: bold;
}
.result{
  float: right;
  display: inline-flex;
}
.heji{
  margin: 0 12px;
  padding:3px;
}
.jisuan_btn{
  color: #fff;
  background: #f30;
  font-size: 18px;
  font-weight: bold;
  padding: 3px;
  border-style: none;
}
</style>
<body>
  <div id="app">
     <div class="wrap shangjia">
       <input type="checkbox" class="checked_inpu" v-model="checkedAll">选择商家全部商品
     </div>
     <div class="wrap all_list">
       <ul>
         <li
          v-for="(item, index) in allList"
          class="list_item" >
           <input
            v-model="item.checked"
            type="checkbox" 
            class="checked_inpu">
           <div class="list_box">
             <div class="list_img_tit_price"> 
                <img :src="item.src" alt="" class="list_img">
                <div class="list_tit_price">
                  <div>{{item.title}}</div>
                  <div style="color:red;">￥{{item.price}}</div>
                </div>
             </div>
             <div class="total">
               <div class="num_cancle" @click="controlNum('cancle', index)">-</div>
               <input type="text" class="num_total" v-model.number="item.order">
               <div class="num_add" @click="controlNum('add',index)">+</div>
             </div>
           </div>
         </li>
       </ul>
     </div>
     <div class="wrap">
        <input type="checkbox" class="checked_inpu" v-model="checkedAll">全选
        <div class="result">
          <div class="heji">合计：<span>{{amountPrice}}</span></div>
          <button class="jisuan_btn">去结算({{sumTotal}})</button>
        </div>
      </div>
  </div>
</body>
<script src="./vue.js"></script>
<script>
  const vm = new Vue({
    el:"#app",
    data:{
       allList:[
         {
           title:"【第一】黄河之水天上来，奔流到海不复回",
           src:'./img/1.jpg',
           price:880,
           order:1,
           id:0
         },
         {
           title:"【第二】黄河之水天上来，奔流到海不复回",
           src:'./img/2.jpg',
           price:881,
           order:1,
           id:1
         },
         {
           title:"【第三】黄河之水天上来，奔流到海不复回",
           src:'./img/3.jpg',
           price:882,
           order:1,
           id:2
         },
         {
           title:"【第四】黄河之水天上来，奔流到海不复回",
           src:'./img/4.jpg',
           price:883,
           order:1,
           id:3
         },
         {
           title:"【第五】黄河之水天上来，奔流到海不复回",
           src:'./img/5.jpg',
           price:884,
           order:1,
           id:4
         },
         {
           title:"【第六】黄河之水天上来，奔流到海不复回",
           src:'./img/6.jpg',
           price:885,
           order:1,
           id:5
         },
       ]
    },
    methods:{
      controlNum(temp,index){
        if(temp==="add"){
          this.allList[index].order++;
        }else{
          if(this.allList[index].order<=1){
            alert("数量不能小于一了哟！！")
            return ;
          }
          this.allList[index].order--;
        }
      }
    },
    computed:{
      selectTotal(){
        return this.allList.filter(el => el.checked)
      },
      amountPrice(){
          let price = 0;
          this.selectTotal.forEach(el => {
             price +=el.price * el.order
          })
          return price;
      },
      sumTotal(){
        let total=0;
        for(let i = 0; i < this.selectTotal.length; i ++){
          total += this.selectTotal[i].order;
        }
        return total;
      },
      checkedClick(e){
        return e;
      },
      checkedAll:{
        get(){
          return this.allList.every(el=>el.checked)
        },
        set(val){
          this.allList.forEach(el=>el.checked=val)
        }
      }
    }
  })
   vm.allList.forEach(el => vm.$set(el, "checked", false));
</script>
</html>

未全选