溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“vue怎么實現商品多選功能”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“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 >￥{{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>未全選
全選
感謝各位的閱讀，以上就是“vue怎么實現商品多選功能”的內容了，經過本文的學習后，相信大家對vue怎么實現商品多選功能這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
