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 选择之单选,多选,反选,全选,反选的更多相关文章

  1. vue实现功能 单选 取消单选 全选 取消全选

    vue实现功能 单选 取消单选 全选 取消全选 代码部分 <template> <div class=""> <h1>全选框</h1> ...

  2. vue+vant-UI框架写的购物车的复选框全选和反选

    购物车页面的设计图 商品的列表 代码: <ul v-if="shoppingListData.rows.length"> <li v-for="(ite ...

  3. Vue 全选/取消全选,反选/取消反选

    这是一个组件: <template> <div> <div> <input type="checkbox" v-model="i ...

  4. 复选框全选、全不选和反选的效果实现VIEW:1592

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  5. jQuery 复选框全选/取消全选/反选

    jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...

  6. jQuery 前端复选框 全选 反选 下拉菜单联动

    jQuery 页面中复选框全选.反选.下拉联动(级联) <!DOCTYPE html> <html lang="en"> <head> < ...

  7. jQuery 实现复选框全选、反选及获取选中的值

    实现复选框全选,反选及获取选中的值: 代码如下: <!doctype html> <html lang="en"> <head> <met ...

  8. html+css+js实现复选框全选与反选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  9. js 判断 复选框全选、全不选、反选、必选一个

    一个挺 使用的 js 代码片段,  判断  复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> & ...

  10. jQuery实现复选框 全选、反选、全不选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

随机推荐

  1. [转帖]我花了10个小时,写出了这篇K8S架构解析

    我花了10个小时,写出了这篇K8S架构解析 https://www.toutiao.com/i6759071724785893891/   每个微服务通过 Docker 进行发布,随着业务的发展,系统 ...

  2. 删除elasticsearch 30天前的所有索引

    我的索引格式为 xxx-xxx-xxx-2019.06.27 xxx-xxxx-2019.06.27 脚本思路: 获取目前 es上所有索引,以日期进行拆分,然后用索引时间对比一个月前的日期,日期小于一 ...

  3. git 学习笔记 --Bug分支

    软件开发中,bug就像家常便饭一样.有了bug就需要修复,在Git中,由于分支是如此的强大,所以,每个bug都可以通过一个新的临时分支来修复,修复后,合并分支,然后将临时分支删除. 当你接到一个修复一 ...

  4. 【Maven基础入门】02 了解POM文件构建

    温故 上一节我们说过:Maven 是一个基于POM文件的构建工具,当然离不开POM文件 POM文件是一个XML标记语言表示的文件,文件就是:pom.xml 一个POM文件包含了项目的基本信息,用于描述 ...

  5. 全栈项目|小书架|服务器端-NodeJS+Koa2实现首页图书列表接口

    通过上篇文章 全栈项目|小书架|微信小程序-首页水平轮播实现 我们实现了前端(小程序)效果图的展示,这篇文章来介绍服务器端的实现. 首页书籍信息 先来回顾一下首页书籍都有哪些信息: 从下面的图片可以看 ...

  6. zcmu 1540第k大数

    1540: 第k大数Time Limit: 10 Sec  Memory Limit: 128 MB[Submit][Status][Web Board]Description有两个序列a,b,它们的 ...

  7. 高性能Golang研讨会【精】

    by Dave Cheney 概观 本次研讨会的目标是为您提供诊断Go应用程序中的性能问题并进行修复所需的工具. 通过这一天,我们将从小工作 - 学习如何编写基准,然后分析一小段代码.然后走出去讨论执 ...

  8. Python中的 x+=x 与 x = x + x的区别

    对于Python中的可变数据类型(列表,字典)来说,+= 和 ..=..+..是不同的 加等是直接在变量的值上面进行操作,会修改了原来变量的值 先等后加会重新分配一个内存空间,不会再原有的变量值上面进 ...

  9. springboot笔记10——整合Redis

    依赖 <dependencies> <!--web依赖--> <dependency> <groupId>org.springframework.boo ...

  10. Laravel入门及实践,快速上手ThinkSNS+二次开发

    温馨提示: l 本文纯干货,文字和代码居多,且适合零基础Laravel学习者: l 本文会新建一个名为 blog 的 Laravel 程序,这是一个非常简单的博客. l  欢迎随时关注ThinkSNS ...