vue 选择之单选,多选,反选,全选,反选
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、全不选
vue 选择之单选,多选,反选,全选,反选的更多相关文章
- vue实现功能 单选 取消单选 全选 取消全选
vue实现功能 单选 取消单选 全选 取消全选 代码部分 <template> <div class=""> <h1>全选框</h1> ...
- vue+vant-UI框架写的购物车的复选框全选和反选
购物车页面的设计图 商品的列表 代码: <ul v-if="shoppingListData.rows.length"> <li v-for="(ite ...
- Vue 全选/取消全选,反选/取消反选
这是一个组件: <template> <div> <div> <input type="checkbox" v-model="i ...
- 复选框全选、全不选和反选的效果实现VIEW:1592
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- jQuery 复选框全选/取消全选/反选
jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...
- jQuery 前端复选框 全选 反选 下拉菜单联动
jQuery 页面中复选框全选.反选.下拉联动(级联) <!DOCTYPE html> <html lang="en"> <head> < ...
- jQuery 实现复选框全选、反选及获取选中的值
实现复选框全选,反选及获取选中的值: 代码如下: <!doctype html> <html lang="en"> <head> <met ...
- html+css+js实现复选框全选与反选
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- js 判断 复选框全选、全不选、反选、必选一个
一个挺 使用的 js 代码片段, 判断 复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> & ...
- jQuery实现复选框 全选、反选、全不选
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
随机推荐
- 【洛谷4482】Border的四种求法(后缀自动机_线段树合并_链分治)
这题我写了一天后交了一发就过了我好兴奋啊啊啊啊啊啊 题目 洛谷 4482 分析 这题明明可以在线做的,为什么我见到的所有题解都是离线啊 -- 什么时候有机会出一个在线版本坑人. 题目的要求可以转化为求 ...
- 24 AdminLTE 基础入门
1.AdminLTE介绍 AdminLTE是一款建立在bootstrap和jquery之上的开源的模板主题工具,它提供了一系列响应的.可重复使用的组件,并内置了多个模板页面:同时自适应多种屏幕分辨率, ...
- C++中几种字符串表示方法
最近学习C++时,被几种字符串搞的有点乱,这里记录一下. c++中有两种风格字符串,分别是: C++风格字符串 C风格字符串 它们各自的声明方式如下: void main(){ string a = ...
- Source Insight 4.0相对路径的设置
比如在D盘有个51的Firmware工程 里面有几个文件夹存放程序文件,项目文件在Project文件夹里,也就是整个Firmware里的文件都是有用的. Keil项目文件位置. 到这里就可以双击Tem ...
- python--osi七层模型
OSI七层模型 OSI七层参考模型 学计算机的人想必都对OSI七层参考模型不陌生,OSI七层参考模型是国际标准化组织(ISO)制定的一个用于计算机或通信系统间互联的标准体系.它是一个七层的.抽象的模型 ...
- 手把手教你做JavaWeb项目:登录模块
现如今,无论是客户端还是移动端,无论是游戏登陆还是社交平台登陆,无处不在的“登陆”.那么你知道怎么制作吗?今天就为你娓娓道来: 用户登录 在各大信息管理系统中,登录功能是必不可少的,他的作用就是验证用 ...
- vim 自定义设置
修改系统配置(面对所有用户): root@bogon:~# cd /etc/vim/ root@bogon:/etc/vim# ls vimrc vimrc.tiny root@bogon:/etc/ ...
- k8s集群node节点一直NotReady, 且node节点(并非master)的kubelet报错:Unable to update cni config: No networks found in /etc/cni/net.d
若要转载本文,请务必声明出处:https://www.cnblogs.com/zhongyuanzhao000/p/11401031.html 问题: 集群搭建的过程中,master节点初始化成功,但 ...
- python_进程池以及线程池
可以重复利用的线程 直接上代码 from threading import Thread, current_thread from queue import Queue # 重写线程类 class M ...
- 处女篇:自用C#后端SqlHelper.cs类
自用SqlHelper.cs类,此类来自软谋教育徐老师课程SqlHelper.cs! using System; using System.Collections; using System.Coll ...