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 ...
随机推荐
- spring mvc 处理pojo传递对象时该对象继承父类的属性在网络接收端接收该属性值总是null,why?
//=========================== 情形一: ===============================//在网络上传递User1类对象时info属性值在网络的另一端能够接 ...
- Codeforces Round #604
Beautiful Regional Contest 题意 题解 代码 Beautiful Sequence 题意 题解 代码 一个思路不够清晰的代码 Beautiful Mirrors with q ...
- STL源码剖析——序列式容器#3 Deque
Deque是一种双向开口的连续线性空间.所谓的双向开口,就是能在头尾两端分别做元素的插入和删除,而且是在常数的时间内完成.虽然Vector也可以在首端进行元素的插入和删除(利用insert和erase ...
- Delphi TButton.OnClick 匿名函数用法
type TNotifyEventRef = reference to procedure(Sender: TObject); function AnonymousEvent(const Proc: ...
- 大数据之路【第十四篇】:数据挖掘--推荐算法(Mahout工具)
数据挖掘---推荐算法(Mahout工具) 一.简介 Apache顶级项目(2010.4) Hadoop上的开源机器学习库 可伸缩扩展的 Java库 推荐引擎(协同过滤).聚类和分类 二.机器学习介绍 ...
- 最少硬币数——Java
问题:有n种硬币,面值分别为v1,v2,v3,…,vn,存于数组T[1:n]中,可以使用的各种面值的硬币个数存于数组Coins[1:n]中.对任意钱数0≤m≤20001,设计一个用最少硬币找钱m的方法 ...
- Http、RESTful、RPC、MQ、Socket 概念与区别
若要转载本文,请务必声明出处:https://www.cnblogs.com/zhongyuanzhao000/p/11700815.html 1. 关于HTTP: HTTP,即超文本传输协议,是一个 ...
- Codeforces Round #581 (Div. 2)
A:暴力. #include<cstdio> #include<cstring> #include<iostream> #include<algorithm& ...
- Redis读写分离(三)
1.redis高并发跟整个系统的高并发之间的关系 redis,要搞高并发的话,不可避免,要把底层的缓存搞得很好 mysql,高并发,做到了,那么也是通过一系列复杂的分库分表,订单系统,事务要求的,QP ...
- mysql修改后启动my.cnf报错Starting MySQL... ERROR! The server quit without updating PID file (/var/lib/mysql/localhost.localdomain.pid).
mysql中文乱码解决 mysql修改my.cnf后启动报错Starting MySQL... ERROR! The server quit without updating PID file (/v ...