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>未全选
全选
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue3 实现网页背景水印功能,这里水印的字体大小、颜色和排布参考了企业微信的背景水印，使得看起来不那么突兀，需要的朋友可以参考下2022-08-08
这篇文章主要介绍了vue接通后端api以及部署到服务器操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了vue缓存组件keepalive的相关资料,keep-alive组件是使用 include exclude这两个属性传入组件名称来确认哪些可以被缓存的，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2022-08-08
最近看完Vue3和Vite文档之后,就写了个小demo,整体感觉下来还是很丝滑的,下面这篇文章主要给大家介绍了关于vite+element-plus项目基础搭建的全过程,需要的朋友可以参考下2022-07-07
本篇文章主要介绍了vuejs2.0实现一个简单的分页示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
vue安装node-sass和sass-loader报错问题的解决办法
这篇文章主要给大家介绍了关于vue安装node-sass和sass-loader报错问题的解决办法,文中通过图文以及示例代码将解决的方法介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2023-01-01
VUE是通过传递一些配置给Vue对象和页面中引用插值表达式来操作DOM的,下面这篇文章主要给大家介绍了关于Vue3中操作dom的四种方式总结,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-12-12
编程式路由在我们的项目使用过程中最常用的的方法了。这篇文章主要介绍了讲解vue-router之什么是编程式路由，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要为大家详细介绍了Vue如何使用vue-pdf实现PDF文件预览的功能，文中的示例代码讲解详细，具有一定的参考价值，感兴趣的可以了解一下2023-03-03
下面小编就为大家分享一篇vue将对象新增的属性添加到检测序列的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
最新评论