1、单选

当我们用v-for渲染一组数据的时候,我们可以带上index以便区分他们我们这里利用这个index来简单地实现单选。

  1. <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是不是等于自己,如果等于则选中。

代码如下:

  1. data() {
  2. return {
  3. selectedNum:"",
  4. radioList: ["某个元素", "某个元素", "某个元素", "某个元素", "某个元素"],
  5. };
  6. },
  7. methods: {
  8. //单选
  9. select(i) {
  10. this.selectedNum = i;
  11. },
  12. }

  

  1.  

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. 构建C1000K的服务器(2) – 实现百万连接的comet服务器

    转自:http://www.ideawu.net/blog/archives/742.html 这是关于 C1000K 序列文章的第二篇, 在前一篇文章 构建C1000K的服务器(1) – 基础 中, ...

  2. [转帖]插曲:大白话带你认识Kafka

    插曲:大白话带你认识Kafka 2019-11-18 21:58:27 从事Java 阅读数 2更多 分类专栏: java Kafaka   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA ...

  3. 更改ubuntu桌面环境

    1.修改桌面环境 update-alternatives --config x-session-manager 2.卸载某一种ppa源下面的软件 sudo apt-get install ppa-pu ...

  4. JavaWeb项目之多条件过滤

    相信很多同学在学习java基础之后,面对各种项目还是相当头疼,那今天我将手把手教你学会JavaWeb项目中的多条件过滤,希望你能在与我实战的过程中积累经验,更进一步. 分页查询 需求分析:在列表页面中 ...

  5. Python 基础-import 与 from...import....

    简单说说python import与from-import- 在python用import或者from-import来导入相应的模块.模块其实就一些函数和类的集合文件,它能实现一些相应的功能,当我们需 ...

  6. MOOC 数据库笔记(四):关系代数

    关系代数 关系代数概述 特点 基于集合,提供了一系列的关系代数操作:并.差.笛卡尔积(广义积).选择.投影和更名等基本操作 以及交.连接和关系除等扩展操作,是一种集合思维的操作语言. 关系代数操作以一 ...

  7. Visual Studio 2019 XAML Hot Reload功能介绍

    Visual Studio 2019提供了XAML Hot Reload功能,这个功能可以让WPF程序运行以后仍然可以修改XAML代码,并实时显示. XAML Hot Reload功能在Blend F ...

  8. vxlan 协议

    vxlan 协议原理简介 1. vxlan 简介 VXLAN 全称是 Virtual eXtensible Local Area Network,虚拟可扩展的局域网.它是一种 overlay 技术,通 ...

  9. Code Clean读书笔记

    代码整洁之道读书笔记 by fangpc 序言部分 "神在细节之中" - 建筑师路德维希 5S哲学(精益) 整理(Seiri):搞清楚事物之所在--通过恰当地命名之类的手段--至关 ...

  10. android之自定义viewGroup仿scrollView的两种实现(滚动跟粘性)

    最近一直在研究自定义控件,一般大致分为三种情况:自绘控件,组合控件,继承控件.接下来我们来看下继承控件.在此借鉴一位博主的文章,补充粘性的实现效果,并且加注自己的一些理解.大家也可以查看原文博客.an ...