<template>
<div v-for="(item,index) in list" :key="index">
<div @click="selectClick(item,index)">
<div v-show="item.isShow">{{item.name}}</div>
</div>
</div>
</template>
<script>
export default {
data() {
return: list: []
},
methods: {
selectClick(item,index) {
if(!item.isShow) { // 判断是否有isShow属性
this.$set(item,'isShow',false) // 没有则为当前对象设置该属性为false
item.isShow = !item.isShow
}else {
item.isShow = !item.isShow
}
}
}
}
</script>
相关推荐
SHAP图全解析:从理论到实践,教你如何读懂和优化模型特征
本文全面解析SHAP图,从博弈论基础到实战应用,指导读者如何解读和利用SHAP值优化机器学习模型。通过详解特征重要性条形图、小提琴图、依赖图及决策图等关键可视化工具,帮助数据科学家精准诊断模型、识别特征交互,并将洞见转化为特征工程与模型调试的实际行动,有效提升模型可解释性与性能。
v-for循环出多个元素,如何单独选中目标元素
我们经常使用vue中v-for进行元素的循环渲染,渲染之后需要添加单独的功能,这个时候就会遇到一些问题。 上述代码中,我循环渲染了多个div,并添加了鼠标移入和移出事件。但是,在触发事件(鼠标移入)后,会导致所有的div都产生变化(所有div都触发函数并变色),这与意图不符。于是,修改如下: 原理:设置一个动态的类(v-bind),利用三元表达式判断传入的index是否与当前元素的index相等,如果相等,则改变当前...
RV1126 ISP开发实战:从Tuner调试到IQ文件解析
本文详细介绍了RV1126 ISP开发的完整流程,从Tuner调试到IQ文件解析,涵盖了环境搭建、工具使用、参数配置及性能优化等关键环节。通过实战案例和避坑指南,帮助开发者快速掌握Rockchip芯片的ISP开发技巧,提升图像处理质量。
v-for循环给某个item添加点击事件
<template> <view class="bread" v-for="(item, index) in nodePathArray" :key="index" @click='HandleClick(item)'> {{item.name}} </view> </template> methods:{ HandleClick(index){ //点击事件 if..
【立创开源】太阳能板充电方案单节3.7v锂电池充电
一直对太阳能板感兴趣,老是感觉充电好麻烦,要是放在那里就可以自己充电多好,所以尝试做了一个太阳能充电板。因为这几天都是阴天,所以测试效果不太好,但是下雨天也是能充电的,但是基本只能维持电量不掉,电压差不多4.2v以上,电流只有2mA。中午出太阳的时候,隔着玻璃放在太阳下测试,电流有12mA以上。能充起一点点电。等大晴天看一看能不能达到卖家说50mA。┗( T﹏T )┛感觉达不到。这个东西只能当一个玩具(;′⌒`)。不过如果汽车上一些行车记录仪加一个这个,汽车经常在太阳下停车,可能再也不用充电了。
别再手动配电脑了!手把手教你用Windows Server 2022搭建企业AD域(附DNS配置避坑指南)
本文详细介绍了如何使用Windows Server 2022搭建企业AD域,提升20+终端的管理效率。通过实战案例和避坑指南,解析AD域的核心价值、部署步骤及DNS配置技巧,帮助企业实现集中权限管理、安全策略统一部署,显著降低IT运维成本。
Vue 表单、自定义指令、计算属性、侦听器、过滤器、生命周期、数组方法
Vue常用特性 表单基本操作 获取单选框中的值 通过v-model <!-- 1、 两个单选框需要同时通过v-model 双向绑定 一个值 2、 每一个单选框必须要有value属性 且value 值不能一样 3、 当某一个单选框选中的时候 v-model 会将当前的 value值 改变 data 中的 数据 gender 的值就是选中的值,我们只需要实时监控他的值就可以了 --> <input type="radio" id="m
什么是Merkle树?用“文件柜”类比理解区块链的核心技术
Merkle树是一种用于区块链的数据结构,像一个高效的“文件柜”,用于存储和验证大量交易数据。比特币通过Merkle树将交易哈希组织成树状结构,层层汇总,最终生成一个唯一的根哈希,存储在区块头中。这种设计大幅减少数据存储和验证成本,支持快速校验交易的完整性和存在性。Merkle树通过密码学保证数据不可篡改,广泛应用于比特币、区块链及其他分布式系统。它的优势在于高效、轻量和安全,尤其适合轻节点验证和数据同步。理解Merkle树就像掌握区块链的“索引秘籍”,是Web3世界的关键技术。
v-for循环复选框显示名称传Id,及判断是否选中
页面显示权限名称,向后台传权限Id <el-checkbox v-for="(item,index) in permissionAll" :key="index" v-model="label" :label="item.id" border style="width:18...
PLCopen运动控制避坑指南:单轴功能块常见报错排查(基于SM3_Basic函数库)
本文深入解析PLCopen运动控制中单轴功能块的常见报错问题,基于SM3_Basic函数库提供实用排查指南。从功能块逻辑错误与硬件报错的甄别技巧到高频报错场景的解决方案,帮助工程师快速定位并解决运动控制系统中的稳定性问题,提升工业自动化设备的运行效率。
搭建一个简单的 Django + Vue 项目
在本文中,我将为您详细介绍如何搭建一个简单的 Django + Vue 项目。Django 是一个使用 Python 编写的高级 Web 框架,而 Vue 是一个流行的 JavaScript 框架,用于构建用户界面。通过结合 Django 和 Vue,我们可以创建强大的全栈 Web 应用程序。创建 Django 项目设置 Django 后端创建 Vue 前端连接 Django 和 Vue让我们开始吧!
vue小案例---v-if条件判断、v-for循环
<!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>D.
第1课:开篇扫盲——OpenClaw是什么?能帮你解决什么问题?(入门必看)
核心目标:学会安装、卸载、管理OpenClaw技能,自定义AI代理的性格与权限,让AI贴合自己的使用习惯。核心内容技能市场详解:ClawHub市场核心技能分类(办公、学习、开发、生活),热门技能推荐(web-search、文件处理、邮件管理)[superscript:3][superscript:4]。技能安装与卸载:终端命令实操(openclaw skill install/uninstall),技能更新与版本管理[superscript:3]。
uni-app实现多选,点击选中并改变样式,可取消
uni-app实现多选,点击选中并改变样式,可取消。 效果图如下: 点击选中且可以取消选中 在html中 <a :class="{'cur': rSelect.indexOf(index)!=-1}" v-for="(value,index) in infoArr" :key="index" @tap="tapInfo(index)">{{value.name}}</a> 在js中 export default { data(){ return{
怀旧版电脑GBC模拟器
再现原版GBC掌机的界面,电脑运行连游戏界面都一样大小,很怀旧,很真实,(英文版)强烈推荐,很小的文件,很难才找到的。
android 蓝牙通讯demo
android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。
vue实现for循环标签多选及取消效果
vue实现for循环标签多选及取消效果
假人有限元模型
假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用
vue v-for循环多个标签,点击标签变色,再点击取消,可以同时多选点击多个
vue v-for循环多个标签,点击标签变色,再点击取消,可以同时多选点击多个 效果: html: <div class="relFacilityTitcon"> <i v-for="(item,index) in facilityList" :key="index" @click="changeSpan(index);" :class="{'bgcolor':spanIndex.indexOf(index)>-1}" >{{item}}</i> <
lwip-2.0.3
lwip是瑞典计算机科学院(SICS)的Adam Dunkels 开发的一个小型开源的TCP/IP协议栈。实现的重点是在保持TCP协议主要功能的基础上减少对RAM 的占用。
vue实现单选取消和多选双击取消效果
vue单击选中和取消和多选效果单击选中二级目录三级目录 单击选中 我们在日常项目中经常需要实现,点击一个导航栏高亮,或者点击显示遮罩层展示信息。先来看一下效果。  二级目录 三级目录 ...
uniapp使用checkbox多选踩坑之路
uniapp使用checkbox多选 取消选中时无法获取当前点击的value
elementUi中的table实现跨页多选数据——功能实现
最近在开发工业品超市的后台系统,遇到一个需求,就是实现在一个table表格中多选数据,由于table表格中的数据较多,所以要分页获取,因此现在的需求变为:如果在跨页的table表格中跨页选择数据 我一直以为elementUi中的table是不能实现此功能的,结果百度后发现,竟然是支持的。 效果图: 表格第一页选中2条数据: 表格第二页选中1条数据 这样返回到第一页的时候,第一页选中的两条数据还是勾选的状态的。 点击表格底部的完成选择订单按钮,可以拿到选中的三条数据。 跨页多选功能实现 给table添加r
vue.js之v-for循环中动态改变每个item的样式
vue.js之v-for循环中动态改变每个item的样式 1.需求 支持单击选中,再次单击取消选中 当未选中任何条件按钮时则自动选择全部 点击A则选中第一行全部,点击C代表选中第二行全部 选择全部时(默认选择全部),自动取消其他选择 2.思路 定义数据的结构,将产品分类,A,C,elseProduct "全部"按钮,以及每个产品中应有是否选中的flag,以及点击事件 ...
vue中实现点击给当前元素添加class(单选);给点击元素添加class(多选)
比如有一个价格div(这里因为是uniapp所以所有的div都写为view),是v-for循环tags对象中的price数组生成的,price里面有name即价格。点击该元素让当前点击项的class为actived,其他的为空(该元素有默认的class:price-tag)。 代码如下: <view class="filter-list flex"> <view v-for="(item,index) in tags.price" :key="index"> <view
实现循环出来的列表按钮单选或多选,选中效果
在我们实际开发中或多或少的遇到一些UI组件不能满足我们产品需求的时候.我们该怎么办呢? 说服他换成你能快速实现的方式来搞!或者屈服,面向百度自己慢慢搞 悄悄的说一句你这次比较幸运,是面向我了,这个坑我已填平 一. 单选就比较简单了 注意精髓:实现思路来了 第一种是遍历的时候每一项都有一个唯一值也就是索引值, 使用索引值与点击时获取到的当前元素的索引进行比较 两者相等时添加一个类名例如 :class="{active:index==num}",文字理解如果比较吃力 那我们就上代码 // num是在d
vue技巧:多标签可点击、选中、样式变化
vue技巧:多标签可点击、选中、样式变化
el-table中单击选中单元格,再次点击可取消选中,并支持多选
这次的需求中还要求单击选中单元格,再次点击可取消选中,并且支持多选 其中用到的数据结构同上一篇文章一致,我就不在贴代码了 博客园地址:https://www.cnblogs.com/bingchenzhilu/p/16827461.html <el-table v-loading="loading" :data="assistlist.lists" @cell-click="gocl...
vue 多选 /标签
11
vue实现多选和取消多选的效果
一、要实现的效果 1.当点击“全选”时,能全选所有; 2.点取消掉列表的某个input框时,“全选”框不被选择; 二、html结构 前提: v-for循环遍历list,列表中的每个item都有checked属性,用v-model绑定item.checked;input标签有change方法,当值改变时生效 (1)单选: <div v-for="(i,index) in list"> <input type="checkbox" v-m
188



被折叠的 条评论
为什么被折叠?



