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. [Linux] 树莓派 4B 安装 Ubuntu 19.10 (Eoan Ermine) IOT 版

    硬件:Raspberry Pi 4B系统:Ubuntu 19.10 (Eoan Ermine) for IOT官网:https://ubuntu.com/download/iot/raspberry- ...

  2. Linux目录结构(目录结构详解是重点)

    1.Linux目录与Windows目录对比 1.Windows目录结构 2.Linux目录结构 深刻理解Linux 树状文件目录是非常重要的,只有记住他们,你才能在命令行中任意切换,想去哪里去哪里 2 ...

  3. emmet html缩写

    HTML缩写 Emmet使用类似于CSS选择器的语法来描述元素在生成的树中的位置和元素的属性. 元素 您可以使用元素的名字,如div或p以生成 HTML标签. Emmet没有一组预定义的可用标签名称, ...

  4. PE系统——安装教程

    本教程使用到的软件我会在本文末给出,若失效了请私信我,重新上传. 1.安装PE系统前,把U盘插在电脑上(如果你需要安装Windows10系统,请插入一个容量至少8G的U盘).当然容量最好是32—64G ...

  5. Python进阶----数据库的基础,关系型数据库与非关系型数据库(No SQL:not only sql),mysql数据库语言基础(增删改查,权限设定)

    day37 一丶Python进阶----数据库的基础,mysql数据库语言基础(增删改查,权限设定) 什么是数据库:    简称:DataBase ---->DB    数据库即存放数据的仓库, ...

  6. springCloud学习笔记2(服务发现)

    本篇代码存放于:https://github.com/FleyX/demo-project/tree/master/springcloud/spring-cloud%E6%9C%8D%E5%8A%A1 ...

  7. Oracle与SQL Server等数据库的区别

    Oracle与SQL Server等数据库的区别 在Oracle中提倡使用一个连接 Oracle处理多个并发语句使用一个连接,大大提升系统能支持的并发量 Oracle运行在32为单进程平台上SGA和P ...

  8. tomcat 安装记录 centos7 开放对外端口

    //端口查询 [root@CentOS7 bin]# firewall-cmd --query-port=9090/tcp no //添加端口 [root@CentOS7 bin]# firewall ...

  9. 复盘一篇浅谈KNN的文章

    认识-什么是KNN KNN 即 K-nearest neighbors, 是一个hello world级别, 但被广泛使用的机器学习算法, 中文叫K近邻算法, 是一种基本的分类和回归方法. KNN既可 ...

  10. SpringCloud-Zuul源码分析和路由改造

    在使用SpringCloud的时候准备使用Zuul作为微服务的网关,Zuul的默认路由方式主要是两种,一种是在配置 文件里直接指定静态路由,另一种是根据注册在Eureka的服务名自动匹配.比如如果有一 ...