vue实现商品多选功能
更新时间：2022年04月13日 15:39:40 作者：相逢一笑与君行
这篇文章主要为大家详细介绍了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 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>未全选
全选
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
深入理解vue.js中$watch的oldvalue与newValue
这篇文章主要给大家介绍了关于vue.js中$watch的oldvalue与newValue的相关资料，文中通过示例代码介绍的非常详细，并且介绍了关于watch的其他测试，对大家学习或者使用vue.js具有一定的参考学习价值，需要的朋友们下面跟着小编来一起看看吧。2017-08-08
这篇文章主要为大家详细介绍了如何基于Vue3实现一个简单的方位动画,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-02-02
这篇文章主要介绍了Vue终端取消vue、prettier警告warn问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
在使用token进行登录的过程中,如果token过期了,需要重新输入用户名和密码登录,这种体验肯定是不好的,下面这篇文章主要给大家介绍了关于Vue Token过期问题的2种解决方案,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了详解vue移动端项目的适配(以mint-ui为例)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了Vue3设置Proxy代理解决跨域问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
Vue浏览器缓存sessionStorage+localStorage+Cookie区别解析
这篇文章主要介绍了Vue浏览器缓存sessionStorage+localStorage+Cookie区别解析,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了vue iview 导航高亮动态设置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
浅谈Vue3.0新版API之composition-api入坑指南
这篇文章主要介绍了Vue3.0新版API之composition-api入坑指南，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
这篇文章主要介绍了vue之el-form表单校验以及常用正则，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
最新评论