vue實現(xiàn)商品多選功能

更新時間：2022年04月13日 15:39:40 作者：相逢一笑與君行

這篇文章主要為大家詳細介紹了vue實現(xiàn)商品多選功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)商品多選功能的具體代碼，供大家參考，具體內(nèi)容如下

<!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實現(xiàn)實現(xiàn)全選，結(jié)算</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">去結(jié)算({{sumTotal}})</button>
? ? ? ? </div>
? ? ? </div>
? </div>
</body>
<script src="./vue.js"></script>
<script>
? const vm = new Vue({
? ? el:"#app",
? ? data:{
? ? ? ?allList:[
? ? ? ? ?{
? ? ? ? ? ?title:"【第一】黃河之水天上來，奔流到海不復(fù)回",
? ? ? ? ? ?src:'./img/1.jpg',
? ? ? ? ? ?price:880,
? ? ? ? ? ?order:1,
? ? ? ? ? ?id:0
? ? ? ? ?},
? ? ? ? ?{
? ? ? ? ? ?title:"【第二】黃河之水天上來，奔流到海不復(fù)回",
? ? ? ? ? ?src:'./img/2.jpg',
? ? ? ? ? ?price:881,
? ? ? ? ? ?order:1,
? ? ? ? ? ?id:1
? ? ? ? ?},
? ? ? ? ?{
? ? ? ? ? ?title:"【第三】黃河之水天上來，奔流到海不復(fù)回",
? ? ? ? ? ?src:'./img/3.jpg',
? ? ? ? ? ?price:882,
? ? ? ? ? ?order:1,
? ? ? ? ? ?id:2
? ? ? ? ?},
? ? ? ? ?{
? ? ? ? ? ?title:"【第四】黃河之水天上來，奔流到海不復(fù)回",
? ? ? ? ? ?src:'./img/4.jpg',
? ? ? ? ? ?price:883,
? ? ? ? ? ?order:1,
? ? ? ? ? ?id:3
? ? ? ? ?},
? ? ? ? ?{
? ? ? ? ? ?title:"【第五】黃河之水天上來，奔流到海不復(fù)回",
? ? ? ? ? ?src:'./img/5.jpg',
? ? ? ? ? ?price:884,
? ? ? ? ? ?order:1,
? ? ? ? ? ?id:4
? ? ? ? ?},
? ? ? ? ?{
? ? ? ? ? ?title:"【第六】黃河之水天上來，奔流到海不復(fù)回",
? ? ? ? ? ?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("數(shù)量不能小于一了喲??！")
? ? ? ? ? ? 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>

未全選