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 ...
随机推荐
- 【Uiautomatorviewer】报错:Unexpected error while obtaining UI hierarchy java.lang.reflect.InvocationT...
android 9.0系统不能用uiautomator识别 解决方法:android 8.0 以后 uiautomator 无法直接使用的问题https://www.cnblogs.com/copyw ...
- Java高频面试题--单例设计模式
- Codeforces Round #426 (Div. 1) (ABCDE)
1. 833A The Meaningless Game 大意: 初始分数为$1$, 每轮选一个$k$, 赢的人乘$k^2$, 输的人乘$k$, 给定最终分数, 求判断是否成立. 判断一下$a\cdo ...
- Window中C++进行精确计时的方法
嗯,程序员一个永恒的追求就是性能吧? 为了衡量性能,自然需要计时. 奈何无论C标准库还是C++标准库,因为通用性的考虑,其time API精度都不高.基本都是毫秒级的. 所以如果要真正精确地衡量程序的 ...
- An Illustrated Proof of the CAP Theorem
An Illustrated Proof of the CAP Theorem The CAP Theorem is a fundamental theorem in distributed syst ...
- Mysql向新建表中插入数据, Incorrect string value: '\xE5\xBC\xA0\xE4\xB8\x89' for column 'UserName' at row 1
在本地通过MYSQL创建测试表 CREATE Table User ( UserId int not NULL PRIMARY KEY auto_increment, //主键自增 UserName ...
- 利用windows服务实现整点报时功能
程序语言:C# 实现目标:程序托管自动运行,每到整点播放语音报时. 准备素材:00——23点的整点报时声音文件. 实现过程: 1.新建windows服务项目 2.添加安装程序 3.设置服务属性 [添加 ...
- k8s安装部署问题、解决方案汇总
角色 节点名 节点ip master n1 192.168.14.11 节点1 n2 192.168.14.12 节点2 n3 192.168.14.13 https://raw.githubuser ...
- SQL Server安装教程(超详细)
具体教程:https://zijian1998.github.io/2018/03/14/Microsoft%20SQL%20Server%202017%E4%B8%8B%E8%BD%BD%E5%AE ...
- python 基础(三)
tuple: 元组被定义后无法被修改 count(): #count(obj) 统计obj在元组中出现的次数 tup = (1,2,3,4,5,6,5,5,5,5,5,5,5) print(tup.c ...