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实现商品详情页功能之商品选项卡
本文实例为大家分享了vue实现商品详情页功能之商品选项卡的具体代码,供大家参考,具体内容如下 用户点击商品进入商品详情页,默认显示第一个小图对应的大图,然后鼠标滑到小图上,大图也会发生改变,实现效果如下: 实现代码: shopitem.vue的template(HTML),上面是大图,下面是小图,鼠标滑动到小图上,触发getUrl事件(参数是小图的show属性,索引): item.json文件(我的数据文件,默认第一个小图的show为true,默认大图显示第一张.大图和小图的路径一样的,只是cs
-
Vue+Node实现商品列表的分页、排序、筛选，添加购物车功能详解
本文实例讲述了Vue+Node实现商品列表的分页.排序.筛选,添加购物车功能.分享给大家供大家参考,具体如下: 1.分页 商品列表的分页实现是后台根据前端请求的页面大小.页码位置,去数据库中查询指定位置的数据然后返回给前端.比如页面大小为8,要查第3页的数据,则跳过2*8条数据,然后返回接下来的8条数据. 实现滚动加载:页面刚一加载完成并不需要请求所有数据,只显示一部分.当用户下拉到页面底部时,再去请求数据并拼接到商品数据列表中.通过vue-infinite-scroll插件实现滚动加载,在框架
-
vue实现商品规格选择功能
本文实例为大家分享了vue实现商品规格选择的具体代码,供大家参考,具体内容如下 动手之前要先确定自己的商品数据结构,下面是我的商品数据结构 dataInfo: { attr: [ { attr_name: "码数", attr_value: [{attr: "40"}, {attr: "50"}], attr_values: ["
-
vue实现商品购物车全选反选
本文实例为大家分享了vue实现商品购物车全选反选的具体代码,供大家参考,具体内容如下 项目需求: 实现一个购物车全选框实现对商家和商品的全选商家全选框实现对当前商家所有商品的全选取消其中一个商品则取消对应商家全选和全选框选中一个商家下的所有商品则勾选对应商家的全选框,不勾选全选框选中所有商品则勾选所有商家全选框和全选框 我的思路: 1.通过对数据的简单操作可实现更深层次的全选操作2.vue.$set(object, key, value)给对象添加属性可以更新视图3.通过es6的every判断数
-
Vue实现购物车的全选、单选、显示商品价格代码实例
今天中午废了一会时间,总算把项目中的购物车的单选.全选.以及实现数据的动态显示做出来了,给小白分享一下我个人一个解决办法: 购物车的基本页面如下: 先说实现的总体思路 1.给table表中表头th加一个 checkbox,设这两个事件:@click="checkAll" v-model="checkall": 2.给对应的tr加一个 checkbox 绑定一个事件 v-model="checked",checked设为数组,专门放商品Id: 3.
-
vue商城中商品“筛选器”功能的实现代码
在使用vue搭建商城项目的时候,要实现一个商品筛选器的功能,在完成之后,再一次被vue的数据驱动的强大感到震撼! 首先,我们来看一下具体的需求吧.你可以先看下面的这两张图,然后再看文字描述,可能会更容易理解. 没有触发时的状态 触发后的状态 我们需求有下面几点: 1.默认情况下,只显示一级菜单,二级菜单不显 2.存在二级菜单的情况下,在二级菜单没有显示的情况下,点击一级菜单,一级菜单的样式发生改变,二级菜单不显示 3.存在二级菜单的情况下,一级菜单已经点
-
vue实现商品多选功能
本文实例为大家分享了vue实现商品多选功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <m
-
vue.js实现的全选与全不选功能示例【基于elementui】
本文实例讲述了vue.js实现的全选与全不选功能.分享给大家供大家参考,具体如下: elementui是有checkbox组件,不过问题在于checkbox组件内只能嵌套简单的字符串,如果要嵌入标签怎么办? 首先渲染页面: <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox> <tbody v-for="item in o
-
Vue element商品列表的增删改功能实现
目录 介绍 基本信息 上传主图 商品信息vue富文本编辑器的配置 最后提交数据 介绍 整体和用户列表 类似 功能步骤有: 面包屑导航 外部是大的卡片组件 搜索商品 添加商品 表格渲染数据 作用域插槽用于 操作按钮 分页器组件的使用 不一样的点:之前编辑信息 新增信息是 弹出对话框编辑 但商品信息内容较多 我们跳转到一个组件.并且进行商品编辑的时候要进行路由传参 来渲染初始数据 点击添加商品按钮时跳转到新增商品组件对应路径: addGoods(){ this.$router.push('/good
-
vue实现单选和多选功能
本文实例为大家分享了vue实现单选和多选功能的具体代码,供大家参考,具体内容如下复制代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta> <title>Document</title> <script src="../vue.js"></script>
-
利用Vue.js指令实现全选功能
因为刚开始接触vue不久,全选的实现参考了知乎上的实现方法: 1.从服务器拿到数据,为每个item设置checked属性 2.计算选中的数量selectCount,如果选中的数量与selectItems的数量相等,则全选selectAll选中 3.点全选时,将每个item的checked属性置为true,反选时置为false, 4.每次selectItems的属性发生变化时,都将checked的为true的item放入数组checkedGroups中 下面为实现代码: //全选 data: fu
-
Vue自定义指令实现checkbox全选功能的方法
最近做的一个项目需要用到Vue实现全选功能,参考了一下网上的做法,发现用属性计算的复用性不高,于是选用自定义指令,但网上的做法大多是会对原始数据有一定的格式要求,而且没有返回结果,于是做了改进. 上代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id
-
vue 实现搜索的结果页面支持全选与取消全选功能
演示地址,打开.搜索.随便点 http://msisliao.github.io/dem... npm i element-ui -S // main.js import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) demo功能概览 默认没有全选,搜索时支持全选与取消全选, 将选择的数据添加到已选中,已选删除时改变当前搜索列表的状态与全选按钮的状态 全选时
-
Vue实现商品详情页的评价列表功能
本篇我们来实现商品详情页的评价列表. 必要的数据 这里咱们举一个数据的例子,明明白白地了解这些数据是如何绑定到模板中的. 数据来自于Foods父组件,当我们选中商品,跳转到商品详情页,那么就需要依赖父组件中的商品数据,在商品详情页面展示评论,当然也可能没有如下"rating"数据.那我们在后面的模板中,就不展示对应的html结构. { "id": 96985579, "name": "麦辣鸡翅2块", "min_pr