vue+vant-UI框架写的购物车的复选框全选和反选
购物车页面的设计图
商品的列表
代码:
<ul v-if="shoppingListData.rows.length">
<li
v-for="(item,index) in shoppingListData.rows"
:key="index"
>
<van-checkbox
:value="item.goods_id"
v-model="item.isChecked"
checked-color="#07c160"
@click="chooseChange(item.goods_id)"
></van-checkbox>
<div class="list_details">
<div class="shop_img"><img
:src="item.goods_image+'?w=150&h=150&crop=1'"
alt=""
></div>
<div class="goods_presentation">
<div class="pTitle"><p class="p1">{{item.goods_name}}</p></div>
<!-- <p class="p2">{{item.color}}</p> -->
<div class="price">
<span class="spanSprice">{{item.now_price | formatMoney}}</span>
<span class="span_step">
<button
@click="handleReduce(index)"
:disabled="item.goods_qty===1"
>-</button>
<i>{{item.goods_qty}}</i>
<button @click="handleAdd(index)">+</button>
</span>
</div>
</div>
</div>
</li>
</ul>
商品列表
全选的复选框
全选的代码:
<div class="footerflex">
<van-checkbox
v-model="AllChecked"
@click="checkAll"
>全选</van-checkbox>
<span
class="management"
v-if="managementShow"
@click="management()"
>管理</span>
<span
class="finish"
v-if="finishShow"
@click="management()"
>完成</span>
<van-button type="default" class='delete' @click="sureDel()" v-if="finishShow">删除</van-button>
<div v-if="managementShow">
<span class="summation">合计</span>
<i>{{ totalPrice }}</i>
<van-button type="default" class="pay" @click="closeAnAccount()">结算</van-button>
</div>
</div>
单选的change事件
代码:
// 单选的change事件
chooseChange(id) {
if (this.selectedData.indexOf(id) > -1) {
this.remove(this.selectedData, id);
} else {
this.selectedData.push(id);
}
if (this.selectedData.length < this.shoppingListData.total) {
this.AllChecked = false;
} else {
this.AllChecked = true;
}
console.log(this.selectedData);
}
全选的JS
全选的代码:
// 全选和反选
checkAll() {
let list = this.shoppingListData.rows;
if (this.AllChecked) {
list.forEach(element => {
element.isChecked = false;
});
this.selectedData = [];
} else {
list.forEach(element => {
element.isChecked = true;
if (this.selectedData.indexOf(element.goods_id) < 0) {
this.selectedData.push(element.goods_id);
}
});
console.log(this.selectedData);
}
},
数组删除
代码
//数组删除
remove(arr, val) {
var index = arr.indexOf(val);
if (index > -1) {
arr.splice(index, 1);
}
}
综上所述就能实现全选和反选的功能
vue+vant-UI框架写的购物车的复选框全选和反选的更多相关文章
- vue中复选框全选与反选
html主要部分: <template v-for="(item, index) in checkboxList"> <input type="chec ...
- 基于Vue的Ui框架
基于Vue的Ui框架 饿了么公司基于vue开的的vue的Ui组件库 Element Ui 基于vue pc端的UI框架 http://element.eleme.io/ MintUi 基于vue 移动 ...
- element-ui iview-admin 都是基于vue的ui框架
element-ui iview-admin 都是基于vue的ui框架
- 5款vue前端UI框架
Vue.js是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. 实用的 Vue.js组件库可以帮助我们快速搭建页面,下面介绍小编认为比较受欢迎的五个vue ...
- vue实现下拉框全选和输入匹配
实际项目中的一个需求: 点击文本框,弹出带有复选框的选项,然后获取选中项的数据,传给后面的一个功能.在文本框输入内容,也会动态的匹配下拉列表,并且列表带有全选功能. 朴素的效果图: 我选择了用vue实 ...
- vue实现功能 单选 取消单选 全选 取消全选
vue实现功能 单选 取消单选 全选 取消全选 代码部分 <template> <div class=""> <h1>全选框</h1> ...
- 基于vue的UI框架集锦
前端框架百花齐放.争奇斗艳,令人眼花缭乱.大神们一言不合就整一个框架出来,另小白们无所适从.下面罗列了一些比较优秀的UI框架,Star多的大都是老牌劲旅,Star少的许多是后起之秀. (1)Eleme ...
- 很受欢迎的vue前端UI框架
最近在逛各大网站,论坛,SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,小编自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在做自己 ...
- 2018年九个很受欢迎的vue前端UI框架
最近在逛各大网站,论坛,SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,小编自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在做自己 ...
随机推荐
- (未完成)catalyst-system WriteUp(2019暑假CTF第一周reverse)
目录 预备学习--Linux实践:ELF文件格式分析 一.概述 二.分析ELF文件头(ELF header) 三.通过文件头找到section header table,理解其内容 四.通过secti ...
- [BUAA软工]团队任务拆解
团队任务分解 本次博客为项目alpha的任务拆解 WBS 任务估计 任务 时长(h) 语音模块:监听部分 5h 语音模块:消息处理:api 4h 语音模块:消息处理:内部数据结构 3h 语音模块:消息 ...
- Fiddler导出JMX文件配置
(1)安装fiddler jmeter(免安装) 注意事项!fiddler版本必须在v4.6.2以上(插件支持的是4.6版本), jmeter版本最好在v3.0以上,版本太低容易导致导出不成功 这里我 ...
- 利用art.template模仿VUE 一次渲染多个模版
TypeScript代码 import template = require('art-template/lib/template-web'); interface TemplateBindConfi ...
- js写入和读取cookie
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...
- LC 968. Binary Tree Cameras
Given a binary tree, we install cameras on the nodes of the tree. Each camera at a node can monitor ...
- ttyS 串口名称被占用
ttyS 的串口设备名称,我一直觉得是没有问题的,今天才想起来,8250驱动命名了 ttyS的名称,需要将 8250 的驱动删除 , ttyS 的串口名称即可正常使用. 如下 这样 ttyS 的名称即 ...
- C# Newtonsoft.Json解析json字符串处理(最清晰易懂的方法)
需求: 假设有如下json字符串: { ", "employees": [ { "firstName": "Bill", &quo ...
- MySQL之Xtrabackup使用
Xtrabackup对使用innodb存储引擎的mysql数据库进行备份时,不会影响数据库的读写操作(网上是这么说的,我还没验证过) 1.安装yum源 yum install https://repo ...
- express下使用ES6
//环境切换配置 package.json scripts:{ "service": "NODE_ENV=production PORT=3000 npm start&q ...