vue商品多选功能
相逢一笑与君行 人气:1<!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>未全选
全选
加载全部内容