vue 选择之单选,多选,反选,全选,反选
2024-09-01 13:48:46
1、单选
当我们用v-for渲染一组数据的时候,我们可以带上index以便区分他们我们这里利用这个index来简单地实现单选。
<li v-for="(item,index) in radioList" :key="index" :class="selectedNum==index?'active':''" @click="select(index)">{{item}}</li>
首选定义一个selectedNum,当我们点击item时,便把这个selectedNum更改为我们所点击的item的index,然后每个item上加入判断selectedNum是不是等于自己,如果等于则选中。
代码如下:
data() { return { selectedNum:"", radioList: ["某个元素", "某个元素", "某个元素", "某个元素", "某个元素"], }; }, methods: { //单选 select(i) { this.selectedNum = i; }, }
2、多选
3、反选
4、全选
5、全不选
最新文章
- AutoHotKey实现将站点添加到IE的Intranet本地站点
- 如何在Excel中通过VBA快速查找多列重复的值
- golang社工库数据扫描程序
- Luence简单实现1
- ios开发——面试篇C语言精华
- 委托、匿名函数、Lambda表达式和事件的学习
- hibernate设置mysql的timestamp默认值技巧
- IDEA的使用
- ASP.NET 无权访问所请求的资源。请考虑对 ASP.NET 请求标识授予访问此资源的权限。
- kafka 幂等生产者及事务(kafka0.11之后版本新特性)
- 原生JavaScript中动画与特效的实现原理
- Pandas透视表和交叉表
- Vue之项目搭建
- 包学会之浅入浅出Vue.js:结业篇(转)
- TOP100summit:【分享实录-Microsoft】基于Kafka与Spark的实时大数据质量监控平台
- jmeter分布式测试的坑
- selenium+python自动化98--文件下载弹窗处理(PyKeyboard)
- SVN提交小结
- Spring整合MyBatis(五)MapperScannerConfigurer
- from会存在潜在的陷阱
热门文章
- PHP 去一定范围随机小数 随机浮点数
- golang微服务框架go-micro 入门笔记2.2 micro工具之微应用利器micro web
- delphi xe10 FMX 启动参数
- pytest_05_fixture之conftest.py
- mysql 8.0.17 安装与使用
- C#使用Autofac实现控制反转IoC和面向切面编程AOP
- C# vb .net实现圆角矩形特效滤镜
- pathlib的使用
- webpack+vue-cil跨域配置接口地址代理
- IDEA配置自己的注释