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 ...
随机推荐
- 构建C1000K的服务器(2) – 实现百万连接的comet服务器
转自:http://www.ideawu.net/blog/archives/742.html 这是关于 C1000K 序列文章的第二篇, 在前一篇文章 构建C1000K的服务器(1) – 基础 中, ...
- [转帖]插曲:大白话带你认识Kafka
插曲:大白话带你认识Kafka 2019-11-18 21:58:27 从事Java 阅读数 2更多 分类专栏: java Kafaka 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA ...
- 更改ubuntu桌面环境
1.修改桌面环境 update-alternatives --config x-session-manager 2.卸载某一种ppa源下面的软件 sudo apt-get install ppa-pu ...
- JavaWeb项目之多条件过滤
相信很多同学在学习java基础之后,面对各种项目还是相当头疼,那今天我将手把手教你学会JavaWeb项目中的多条件过滤,希望你能在与我实战的过程中积累经验,更进一步. 分页查询 需求分析:在列表页面中 ...
- Python 基础-import 与 from...import....
简单说说python import与from-import- 在python用import或者from-import来导入相应的模块.模块其实就一些函数和类的集合文件,它能实现一些相应的功能,当我们需 ...
- MOOC 数据库笔记(四):关系代数
关系代数 关系代数概述 特点 基于集合,提供了一系列的关系代数操作:并.差.笛卡尔积(广义积).选择.投影和更名等基本操作 以及交.连接和关系除等扩展操作,是一种集合思维的操作语言. 关系代数操作以一 ...
- Visual Studio 2019 XAML Hot Reload功能介绍
Visual Studio 2019提供了XAML Hot Reload功能,这个功能可以让WPF程序运行以后仍然可以修改XAML代码,并实时显示. XAML Hot Reload功能在Blend F ...
- vxlan 协议
vxlan 协议原理简介 1. vxlan 简介 VXLAN 全称是 Virtual eXtensible Local Area Network,虚拟可扩展的局域网.它是一种 overlay 技术,通 ...
- Code Clean读书笔记
代码整洁之道读书笔记 by fangpc 序言部分 "神在细节之中" - 建筑师路德维希 5S哲学(精益) 整理(Seiri):搞清楚事物之所在--通过恰当地命名之类的手段--至关 ...
- android之自定义viewGroup仿scrollView的两种实现(滚动跟粘性)
最近一直在研究自定义控件,一般大致分为三种情况:自绘控件,组合控件,继承控件.接下来我们来看下继承控件.在此借鉴一位博主的文章,补充粘性的实现效果,并且加注自己的一些理解.大家也可以查看原文博客.an ...