vue.js 实现全选，单选，计算商品总价格，商品件数
vue.js 实现全选，单选，计算商品总价格，商品件数
1.标签
<div id="main-body" class="box">
<div class="main">
<input type="checkbox" v-model="ischecked" @click="allchecked" />全选
<div class="sum">￥{{sum}}.00</div>
<div class="settlement">
<span @click="settlement">结算({{count}})</span>
</div>
</div>
<ul>
<li v-for="(item,index) in goodslist" :key="item.name">
<div class="radio">
<input
type="checkbox"
:checked="item.checked"
@click="changechecked($event,item.name)"
/>
</div>
<div class="title"> {{item.name}} </div>
<div class="price">￥{{item.price}}</div>
<div class="num-count">
<button ref="sub" @click="subcount(item.name)">-</button>
<span>{{item.count}}</span>
<button ref="add" @click="addcount(item.name)">+</button>
</div>
</li>
</ul>
</div>
2. js部分
2.1 data部分
data: {
sum: 0,
ischecked: false,
count: 0,
goodslist: [
{
name: "亚托克斯",
price: 100,
checked: false,
count: 1,
},
{
name: "安妮",
price: 150,
checked: false,
count: 1,
},
{
name: "阿卡丽",
price: 200,
checked: false,
count: 1,
},
{
name: "阿利斯塔",
price: 150,
checked: false,
count: 1,
},
{
name: "阿木木",
price: 300,
checked: false,
count: 1,
},
],
},
2.2 methods部分
methods: {
//单选按钮
changechecked(e, name) {
let result = this.goodslist.map((item) => {
if (name == item.name) {
item.checked = e.target.checked;
}
return item.checked;
});
let res = result.every((item) => {
return item;
});
if (res) {
this.ischecked = true;
} else {
this.ischecked = false;
}
this.getnewsum();
this.getnumcount();
},
//自减模块
subcount(name) {
//count自减
this.goodslist.filter((item) => {
if (item.name == name) {
if (item.count <= 0) return (item.count = 0);
item.count--;
}
});
this.getnewsum();
this.getnumcount();
},
//自增模块
addcount(name) {
//count自增
this.goodslist.filter((item) => {
if (item.name == name) {
item.count++;
}
});
this.getnewsum();
this.getnumcount();
},
//全选按钮
allchecked(e) {
if (e.target.checked) {
this.goodslist.forEach((item) => {
item.checked = true;
});
} else {
this.goodslist.forEach((item) => {
item.checked = false;
});
}
this.getnewsum(); // 调用计算总价函数
this.getnumcount(); // 调用计算总数函数
},
//结算结果
settlement() {
console.log("你本次消费" + this.sum + ".00");
},
//计算总价格
getnewsum() {
let num = 0;
this.goodslist.find((item) => {
if (item.checked) {
num += item.price * item.count;
}
});
this.sum = num;
},
//计算总数量
getnumcount() {
let count = 0;
this.goodslist.find((item) => {
if (item.checked) {
count += item.count;
}
});
this.count = count;
},
},
vue.js 实现全选，单选，计算商品总价格，商品件数相关推荐
- vue实现购物车简单的功能-单选全选总价计算、批量删除
vue实现购物车简单的功能-----单选全选总价计算.批量删除等 观看了后盾人视频教学,视频里面对于全选和单选的功能没有讲全,于是自己研究了一下,前端小白,也是第一次写博客,有什么不足和可以优化的地方 ...
- 购物车单选全选，计算总价，出现个小问题，没找到.....
按照正常逻辑走这个代码没问题,但有一次我瞎点的时候,总价没有清空,而是继续向上加,然后继续瞎点就找不到这个问题. 列出来仔细琢磨 <ul class="shopcar_ul" ...
- vue实现全选 单选功能
实现效果 待选 全选 单选 多选 代码 1.页面结构 2.逻辑代码 3.binggo 就这么愉快的完成了
- vue实现购物车全选，总计等功能
一.单价商品的小计 整个操作过程是,商品的数量是可以控制的,可增可减,最少为1.并且在数量的变化中,商品的小计也在变化. 二.单选选中商品 在购物车中,需要选择当前想买的商品,这一功能成为商品的单选, ...
- Jquery全选单选功能
Jquery全选单选功能 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="W ...
- 如何用Vue实现一个全选指令
最近用vue做了两个项目,都需要实现全选反选的功能,两个项目用了两种实现方法,第一个项目用vue的computed,第二个项目用指令来实现,用起来,发觉指令更加方便. 第一次做全选的时候是刚开始接触v ...
- 全选 单选和反选的实现
大家早上好,新的一天又开始咯,继续学习啊,其实最近我发现了一张图特别好玩,如下: 哈哈,就是这张,但是我想说的是,革命尚未成功啊,还得继续修炼啊,好了,闲篇扯到这里,我们今天先来看一下,风靡各大电商网 ...
- JS实现全选、反选、不选
JS实现全选.反选.不选 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head><meta charset=" ...
- js购物车选中商品实现计算商品总价格
为了在激烈的互联网竞争中获得一席之地,都努力使自己的网站更为人性化.比如在购物网站一般都有这样的功能,那就是在结算商品的时候,网站可以自动计算要购买商品所需要花费的金钱数量. 代码实例如下: 01 0 ...
最新文章
- Nature子刊：利用转细菌基因植物修复土壤有毒污染物！
- 磁盘操作系统是计算机语言吗,实时磁盘操作系统
- 修改webpack的publicPath为动态设置以适配公司活动平台
- 整理javascript操作文件说明．
- Java中isAssignableFrom()方法与instanceof()方法用法
- Docker监控：基于阿里云容器服务构建自己的Docker监控框架
- html5 单页视差模板,HTML5+CSS3的单页视差模板
- UINavigationController 多次连续 Push Pop 问题
- 怎么让HTML的属性横着排,css标签怎么设置横向排列
- iPhone 各屏幕尺寸及解析
- 领域驱动设计营销系统建模
- python最近广告_腾讯2018广告算法大赛思路解析(python)
- 科技爱好者周刊（第 167 期）：广告拦截器太过分了
- PD-L1免疫组化检测难点与要点
- 时区的转换nbsp;格林尼治标准时间（GMT…
- 【计算机网络】计算机网络的组成
- Unity学习笔记--实现一个简单的2D地图编辑器
- vs上C/C++并行计算#pragma omp
- 游戏蓝牙耳机哪款好？2021商城最佳人气五款蓝牙耳机推荐
- 解决html页面图片大小不能自适应的问题