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 ...
随机推荐
- 嵌入式02 STM32 实验07 串口通信
STM32串口通信(F1系列包含3个USART和2个UART) 一.单片机与PC机串行通信研究目的和意义: 单片机自诞生以来以其性能稳定,价格低廉.功能强大.在智能仪器.工业装备以及日用电子消费产品中 ...
- golang错误处理和资源管理
- SSM整合学习 三
三:整合Mybatis 完整的项目如下 一:下载所需的jar包 <!--日志--><dependency> <groupId>log4j</groupId&g ...
- Oracle打印输出在控制台
SET SERVEROUTPUT ON --必须有,不然显示不出declare LN_C number(10,0):=0;begin DECLARE LS_STR1 VARCHAR2(200); - ...
- asp.net EFcore配置链接sqlserver
1. 首先我们先用vs2017 创建一个空的 asp.net core api 项目 2. 在生成的解决方案下在建立一个访问数据库使用的类库CoreApi.Model,注意要选择.netcore下的 ...
- WPF 的 VisualBrush 只刷新显示的视觉效果,不刷新布局范围
原文:WPF 的 VisualBrush 只刷新显示的视觉效果,不刷新布局范围 WPF 的 VisualBrush 可以帮助我们在一个控件中显示另一个控件的外观.这是非常妙的功能. 但是本文需要说其中 ...
- .net Dapper 实践系列(4) ---数据查询(Layui+Ajax+Dapper+MySQL)
写在前面 上一小节,总结了数据显示时,会出现的日期问题.以及如何处理格式化日期.这个小节,主要总结的是使用Dapper 中的QueryMultiple方法依次显示查询多表的数据. 实践步骤 1.在Bo ...
- mybatis中参数为list集合时使用 mybatis in查询
mybatis中参数为list集合时使用 mybatis in查询 一.问题描述mybatis sql查询时,若遇到多个条件匹配一个字段,sql 如: select * from user where ...
- crunch制作字典
安装 安装crunch sudo apt-get install crunch 语法 crunch <min> max<max> <characterset> -t ...
- 学习笔记之Vim
Vim (text editor) - Wikipedia https://en.wikipedia.org/wiki/Vim_(text_editor) Vim (/vɪm/;[4] a contr ...