当前位置: 首页 > news >正文

Vue复选框批量删除示例

Vue复选框批量删除

通过使用v-model指令绑定单个复选框
例如<input type="checkbox" id="checkbox" v-model="checked">
而本次我们要做的示例大致是这样的,首先可以增加内容,然后通过勾选来进行单独或者批量删除,但是在此处就可以进行批量操作。
在这里插入图片描述
通过勾选原神和明日进行批量删除后,发现成功了,那么这就是表名咱们的操作没有问题,接下来就要具体代码实现。
在这里插入图片描述

具体代码实现

body中div,挂载点是zjw,也就是张俊伟的缩写,当然这可以自己写什么都行,只要与Vue里面的el对应

<div id="zjw">
<span>添加一条内容</span>
<input placeholder="输入内容" v-model="value"/>
<button @click="add()">添加</button><ul><li v-for="(item,index) in list" :key="index"><input type="checkbox" v-model="item.c"/><span>{{item.d}}</span><button @click="remove(index)">删除</button></li></ul><button @click="removeAll()">批量删除</button>
</div>
<script>const app=new Vue({el:'#zjw',data(){return{list:[{d:'洗碗',c:false},{d:'擦地',c:false}],value:''}},methods:{add(){adds={d:this.value,c:false}this.list.push(adds)this.value=''},remove(i){if(this.list[i].c==true)this.list.splice(i,1)},removeAll(){for (var i = this.list.length - 1; i >= 0; i--)if (this.list[i].c==true) this.list.splice(i, 1);}}})
</script>

分析环节

添加的框

添加操作用@click绑定了一个add()
在input中的v-model是value

<span>添加一条内容</span>
<input placeholder="输入内容" v-model="value"/>
<button @click="add()">添加</button>

下面是script内容
在data中我是用了对象数组来做,里面用了一个c来放复选的状态false没选,true选
而add中也是每次添加的不止文字,还有false或者true,通过this.list.push(adds)加入到数组队尾

data(){return{list:[{d:'洗碗',c:false},{d:'擦地',c:false}],value:''}},methods:{add(){adds={d:this.value,c:false}this.list.push(adds)this.value=''},

对于单个删除和批量操作

这里通过<li v-for="(item,index) in list" :key="index"> <input type="checkbox" v-model="item.c"/> <span>{{item.d}}</span> <button @click="remove(index)">删除</button></li>
来讲data中的数据显示出来,并且可以删除或者批量
button中,使用v-model="item.c"绑定复选框的状态

 <ul><li v-for="(item,index) in list" :key="index"><input type="checkbox" v-model="item.c"/><span>{{item.d}}</span><button @click="remove(index)">删除</button></li></ul><button @click="removeAll()">批量删除</button>

单个删除就是如下操作,一个简单判断this.list[i].c的值就行
对于多选其实也就是多了一个在数组中的循环
for (var i = this.list.length - 1; i >= 0; i--)就可以完成批量删除了

  remove(i){if(this.list[i].c==true)this.list.splice(i,1)},removeAll(){for (var i = this.list.length - 1; i >= 0; i--)if (this.list[i].c==true) this.list.splice(i, 1);}

相关文章:

Vue复选框批量删除示例

Vue复选框批量删除 通过使用v-model指令绑定单个复选框 例如<input type"checkbox" id"checkbox" v-model"checked"> 而本次我们要做的示例大致是这样的&#xff0c;首先可以增加内容&#xff0c;然后通过勾选来进行单独或者批量删除&…...

Docker自定义镜像

一、镜像结构 镜像是将应用程序及其需要的系统函数库、环境、配置、依赖打包而成。 镜像是分层结构&#xff0c;每一层称为一个Layer BaseImage层&#xff1a;包含基本的系统函数库、环境变量、文件系统其它&#xff1a;在BaseImage基础上添加依赖、安装程序、完成整个应用的…...

ardupilot的编译过程

环境 树莓派4b ubuntu20.04 git 2.25.1 python3.8.10 pixhawk2.4.8 下载源码 &#xff08;已经配置好git环境和ssh&#xff09; git clone --recurse-submodules gitgithub.com:ArduPilot/ardupilot.gitcd ardupilotgit status使用git status检查是否下载完整 如果不完整&a…...

Unity中Shader实现模板测试Stencil

文章目录 前言一、UI中的遮罩1、Mask ——> 模板测试2、RectMask2D ——> UNITY_UI_CLIP_RECT 二、模板缓冲区Stencil一般是和Pass平行的部分&#xff0c;Pass部分写的是颜色缓冲区Stencil:Comp&#xff08;比较操作&#xff09;Pass(模版缓冲区的更新) 三、实际使用1、在…...

多线程与并发

多线程与高并发 线程的创建方式1.继承Thread类 重写run方法2.实现Runnable接口 重写run方法3. 实现Callable 重写call方法&#xff0c;配合FutureTask 线程的使用1.线程的状态1.1. 传统操作系统层面5种状态1.2.Java中给线程准备的6种状态 2.线程的常用方法2.1 获取当前线程2.2 …...

手写call方法

Function.prototype.myCallfunction (context,args) {console.log(arguments)//context 表示call里面的第一个参数也就是需要改变this指向的那个对象。//this表示这个方法//把这个方法挂到需要改变指向的对象身上调用&#xff0c;相当于把this指向了这个对象身上&#xff0c;从…...

基于FPGA的图像直方图统计实现,包括tb测试文件和MATLAB辅助验证

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1、图像数据传输 4.2、直方图统计算法 4.3、时序控制和电路设计 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 vivado2019.2 matlab2022a 3.部分核心程序 timescal…...

数据库:Hive转Presto(一)

本人因为工作原因&#xff0c;经常使用hive以及presto&#xff0c;一般是编写hive完成工作&#xff0c;服务器原因&#xff0c;presto会跑的更快一些&#xff0c;所以工作的时候会使用presto验证结果&#xff0c;所以就要频繁hive转presto&#xff0c;为了方便&#xff0c;我用…...

Responder

环境准备 操作系统:Kali Linux工具:responder,john,evil-winrm PS:输入以下命令解决靶场环境无法打开问题 #echo "<靶机IP> unika.htb">>/etc/hostsresponder工具 [Kali 官网] 手册地址:https://www.kali.org/tools/responder/ 摘要: This package c…...

基于下垂控制的并网逆变器控制MATLAB仿真模型

微❤关注“电气仔推送”获得资料&#xff08;专享优惠&#xff09; 主要模块&#xff1a; 建议使用MATLAB2021b及以上版本打开&#xff01; 功率计算模块、下垂控制模块、电压电流双环控制模块、虚拟阻抗压降模块 扰动设置&#xff1a; 在0.5秒到2秒始端设置0.25Hz的电网频…...

android获取RAM、CPU频率、系统版本、CPU核数

参考链接&#xff1a; https://www.jianshu.com/p/76d68d13c475 https://github.com/matthewYang92/Themis 获取CPU频率、核数的逻辑&#xff0c;是通过文件操作实现的&#xff0c;Android是基于Linux系统的&#xff0c;所以该方式针对不同的手机都是可靠的操作方式。 RAM&am…...

微信小程序python+nodejs+php+springboot+vue 讲座预约系统

讲座预约管理系统的用户是系统最根本使用者&#xff0c;按需要分析系统包括用户&#xff1a;学生、管理员。 管理员通过后台的登录页面&#xff0c;选择管理员权限后进行登录&#xff0c;管理员的权限包括学生信息管理和文章公告管理。讲座公告管理&#xff0c;添加讲座公告信息…...

嵌入式开发笔记:STM32的外设GPIO知识学习

GPIO简介&#xff1a; • GPIO &#xff08; General Purpose Input Output &#xff09;通用输入输出口 • 可配置为 8 种输入输出模式 • 引脚电平&#xff1a; 0V~3.3V &#xff0c;部分引脚可容忍 5V &#xff08;如舵机和驱动直流电机&#xff09; • 输出模式下可控制端口…...

单片机论文参考:2、基于单片机的病床呼叫系统设计

任务要求 设计病床呼叫系统&#xff0c;使用3X8矩阵开关分别模拟医院病房与病床位数&#xff0c;当某开关按下时&#xff0c;系统显示呼叫的病房与病床、呼叫的时间。处理完毕可清除该呼叫显示记录。同时有数个病床呼叫时&#xff0c;可以循环呼叫记录显示。 摘要 病房呼叫系统…...

【C语言】结构体实现位段!位段有何作用?

本篇文章目录 1. 声明位段2. 位段的内存分配3. 位段的跨平台问题4.位段的应用5. 如何解决位段的跨平台问题&#xff1f; 1. 声明位段 位段的声明和结构是类似的&#xff0c;有两个不同&#xff1a; 位段的成员必须是 int、unsigned int 或 char。位段的成员名后边有一个冒号和…...

msvcp140为什么会丢失?msvcp140.dll丢失的解决方法

msvcp140.dll 是一个动态链接库文件&#xff0c;它包含了 C 运行时库的一些函数和类&#xff0c;例如全局对象、异常处理、内存管理、文件操作等。它是 Visual Studio 2015 及以上版本中的一部分&#xff0c;用于支持 C 应用程序的运行。如果 msvcp140.dll 丢失或损坏&#xff…...

Ingress Controller

什么是 Ingress Controller &#xff1f; 在云原生生态中&#xff0c;通常来讲&#xff0c;入口控制器( Ingress Controller )是 Kubernetes 中的一个关键组件&#xff0c;用于管理入口资源对象。 Ingress 资源对象用于定义来自外网的 HTTP 和 HTTPS 规则&#xff0c;以控制进…...

离线安装 K3S

一、前言 简要记录一下离线环境下 K3S 的搭建&#xff0c;版本为 v1.23.17k3s1&#xff0c;使用外部数据库 MySQL 作元数据存储&#xff0c;禁用默认组件&#xff08;coredns、servicelb、traefik、local-storage、metrics-server&#xff09;并使用 Helm 单独安装&#xff08…...

Error系列-常见异常问题解决方案以及系统指令总结

前情提要 作为一名开发&#xff0c;日常工作中会遇到很多报错的情况&#xff0c;希望我的总结可以帮助到小伙伴们~日常工作中也会遇到需要部署项目或者登陆linux系统操作的情况&#xff0c;很多时候需要查找一些命令&#xff0c;于是我决定&#xff0c;要把我日常经常用到的一…...

c 各种例子

1. struct{ int code; float cost; }item,*ptrst; ptrst&item; prtst->code3451 // ptrst->codeitem.code(*ptrst).code 结构与union 的运算符相同&#xff0c;不同的是union 在同一时间内只能存储成员中的一种&#xff0c;其他的成员不真实。 2. c的修饰符声…...

BililiveRecorder工具箱深度解析:专业级FLV直播录制文件修复解决方案

BililiveRecorder工具箱深度解析&#xff1a;专业级FLV直播录制文件修复解决方案 【免费下载链接】BililiveRecorder 录播姬 | mikufans 生放送录制 项目地址: https://gitcode.com/gh_mirrors/bi/BililiveRecorder BililiveRecorder工具箱提供了一套完整的直播录制文件…...

本地化AI字幕解决方案:Qwen3-ForcedAligner支持多格式音频

本地化AI字幕解决方案&#xff1a;Qwen3-ForcedAligner支持多格式音频 1. 引言&#xff1a;本地化字幕生成的新选择 在视频内容创作和多媒体处理领域&#xff0c;字幕生成一直是个耗时费力的工作。传统手动添加字幕不仅效率低下&#xff0c;时间轴对齐的精度也难以保证。Qwen…...

当ai安装助手遇见dify:用快马生成能分析环境、智能决策的安装引导代码

最近在折腾Dify这个AI应用开发平台的安装&#xff0c;发现它的安装过程其实也能用AI来优化。刚好用InsCode(快马)平台试了试&#xff0c;发现AI辅助安装真的能省不少事。这里记录下我的实践过程&#xff0c;分享如何用智能脚本让安装流程更顺畅。 环境分析是智能安装的第一步 传…...

【深度评测】C盘爆满别慌!小番茄C盘清理的五大核心功能实测

1. 为什么你的C盘总是爆满&#xff1f; 每次打开电脑看到C盘飘红&#xff0c;是不是感觉血压都上来了&#xff1f;作为一个常年和磁盘空间斗智斗勇的老司机&#xff0c;我发现C盘爆满的原因远比想象中复杂。系统更新残留、软件缓存堆积、临时文件泛滥...这些"隐形杀手&quo…...

如何无损提取Python可执行文件?解锁逆向工程新姿势

如何无损提取Python可执行文件&#xff1f;解锁逆向工程新姿势 【免费下载链接】python-exe-unpacker A helper script for unpacking and decompiling EXEs compiled from python code. 项目地址: https://gitcode.com/gh_mirrors/py/python-exe-unpacker 破解打包黑箱…...

多显示器壁纸难题终结者:Superpaper如何让你的桌面焕然一新?

多显示器壁纸难题终结者&#xff1a;Superpaper如何让你的桌面焕然一新&#xff1f; 【免费下载链接】superpaper A cross-platform multi monitor wallpaper manager. 项目地址: https://gitcode.com/gh_mirrors/su/superpaper 你是否曾为多显示器设置壁纸而烦恼&#…...

Qwen3-4B写作大师效果惊艳:看它如何自动校验医学术语

Qwen3-4B写作大师效果惊艳&#xff1a;看它如何自动校验医学术语 1. 医疗写作的痛点与AI解决方案 医疗科普写作一直面临着专业性与可读性的双重挑战。传统AI写作工具在生成医疗内容时&#xff0c;往往会出现术语混用、逻辑断裂、关键信息遗漏等问题。这些问题不仅影响阅读体验…...

Ubuntu 是什么?能干嘛?为啥 90% 的开发者都选它?一文读懂开源操作系统的王者之道!

Ubuntu是什么&#xff1f;能干嘛&#xff1f;为啥90%的开发者都选它&#xff1f;一文读懂开源操作系统的王者之道&#xff01; 摘要&#xff1a;Ubuntu作为全球最受欢迎的Linux发行版&#xff0c;占据Linux桌面市场40%以上份额&#xff0c;云端市场份额高达70%。本文将深入解析…...

04 月 04 日 AI 每日参考:多厂模型动态频出,产业转向拼用量

今日概览今日 AI 圈迎来多厂模型集中发布&#xff0c;谷歌、微软、阿里等巨头接连推出新模型产品&#xff0c;同时国内 AI 产业规模突破 1.2 万亿元&#xff0c;行业正式从 "拼参数" 转向 "拼用量" 的新阶段。监管层面也同步发力&#xff0c;地方推进 AI 产…...

Swin2SR小白快速上手:无需代码,在线修复低清图片

Swin2SR小白快速上手&#xff1a;无需代码&#xff0c;在线修复低清图片 1. 什么是Swin2SR图像修复技术 Swin2SR是一种基于Swin Transformer架构的AI图像超分辨率技术&#xff0c;它能将低质量图片无损放大4倍。与传统的插值放大方法不同&#xff0c;Swin2SR能够"理解&q…...