vue点击标签切换选中及互相排斥操作


Posted in Javascript onJuly 17, 2020

单身和已婚不能同时选中,不了解保险和已了解保险不能同时选中。

同时各个标签点击可以取消选择

vue点击标签切换选中及互相排斥操作

//html
  <li>
   <span class="fill-title">与我相关</span>
   <div>
   <van-button
    v-for="(item, index) in myself"
    :key="index"
    @click="checkButton('myself', item.id)"
    :class="item.isFlag ? 'current' : ''"
   >{{item.title}}</van-button>
   </div>
  </li>
  <li>
   <span class="fill-title">标签</span>
   <div>
   <van-button
    v-for="item in biaoqian"
    :key="item.id"
    @click="checkButton('tag', item.id)"
    :class="item.isFlag ? 'current' : ''"
   >{{item.title}}</van-button>
   </div>
  </li>

数据

myself: [
  { id: 1,title: "亲属", isFlag: false },
  {id: 2,title: "同乡",isFlag: false},
  {id: 3, title: "同学",isFlag: false },
  {id: 4,title: "同事", isFlag: false},],
  biaoqian: [
  {id: 1, title: "已婚",type: 1,isFlag: false },
  {id: 2,title: "单身",type: 1,isFlag: false },
  {id: 3,title: "有娃",isFlag: false },
  {id: 4,title: "有房", isFlag: false },
  {id: 5,title: "有车",isFlag: false},
  {id: 6,title: "不了解保险",isFlag: false,type: 2},
  {id: 7,title: "已了解保险",isFlag: false,type: 2} ],

js

//标签只能选中一个
 filterData(arr = [], index) {
  let val = "";
  arr.forEach(item => {
  if (item.id == index) {
   item.isFlag = !item.isFlag;
   val = item.isFlag ? item.title : "";
  } else {
   item.isFlag = false;
  }
  });
  return val;
 },
 checkButton(val, index) {
  if (val === "tag") {
  let data = [];
  this.biaoqian.forEach(item => {
   if (item.id == index) {
   // a 记录当前标签状态是否选中,为了取消标签状态
   let a = item.isFlag;
   item.isFlag = !item.isFlag;
   if (item.type) {
    this.biaoqian.forEach(e => {
    if ((e.type == 1 && index < 3) || (e.type == 2 && index > 5)) {
     //先把同一个类型的标签都置为false
     e.isFlag = false;
     if (e.id == index) {
     e.isFlag = a ? false : !e.isFlag;
     }
    }
    });
   }
   }
  });
  let arr = this.biaoqian.filter(item => {
   return item.isFlag;
  });
  arr.forEach(item => {
   data.push(item.title);
  });
  this.personItem.labelList = data;
  } else if (val === "sex") {
  this.personItem.sex = this.filterData(this.sexArr, index);
  } else {
  this.personItem.relation = this.filterData(this.myself, index);
  }
 }

补充知识:vue选中与取消简单实现

我就废话不多说了,大家还是直接看代码吧~

<li v-for="(item,index) in assign" 
  :key="index"
  @click="selected(item)"
  :class="{'active':item.isShow}">

selected(item) {
        if (!item.isShow) {
          item.isShow = true;
          this.selectedList.push(item.id)
        } else {
          item.isShow = false;
          let index = this.selectedList.indexOf(item.id);
          if (index > -1) {
            this.selectedList.splice(index, 1);
          }
        }
      },

以上这篇vue点击标签切换选中及互相排斥操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
什么是JavaScript
Aug 13 Javascript
FusionCharts图表显示双Y轴双(多)曲线
Nov 22 Javascript
JS鼠标滑过图片时切换图片实现思路
Sep 12 Javascript
Node.js事件循环(Event Loop)和线程池详解
Jan 28 Javascript
jQuery侧边栏实现代码
May 06 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
Jun 09 Javascript
jsTree使用记录实例
Dec 01 Javascript
web前端vue filter 过滤器
Jan 12 Javascript
Javascript 之封装(Package)
Sep 14 Javascript
详解如何构建Promise队列实现异步函数顺序执行
Oct 23 Javascript
JavaScript栈和队列相关操作与实现方法详解
Dec 07 Javascript
JS实现“全选”和&quot;全不选&quot;功能代码实例
Feb 06 Javascript
Vue点击切换Class变化,实现Active当前样式操作
Jul 17 #Javascript
JS this关键字在ajax中使用出现问题解决方案
Jul 17 #Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
Jul 17 #Javascript
在vue中对数组值变化的监听与重新响应渲染操作
Jul 17 #Javascript
Vue项目中数据的深度监听或对象属性的监听实例
Jul 17 #Javascript
解决vue无法侦听数组及对象属性的变化问题
Jul 17 #Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
Jul 17 #Javascript
You might like
phpexcel导入excel数据使用方法实例
2013/12/24 PHP
PHP中使用Imagick实现各种图片效果实例
2015/01/21 PHP
Zend Framework教程之连接数据库并执行增删查的方法(附demo源码下载)
2016/03/21 PHP
php学习笔记之mb_strstr的基本使用
2018/02/03 PHP
PHP5.0 TIDY_PARSE_FILE缓冲区溢出漏洞的解决方案
2018/10/14 PHP
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
jquery ready()的几种实现方法小结
2010/06/18 Javascript
一个挺有意思的Javascript小问题说明
2011/09/26 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
2012/03/14 Javascript
jquery ajax,ashx,json的用法总结
2014/02/12 Javascript
JS封装的自动创建表格的实现代码
2016/06/15 Javascript
Bootstrap表单布局
2016/07/19 Javascript
jQuery中delegate()方法的用法详解
2016/10/13 Javascript
javascript简易画板开发
2020/04/12 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
2017/04/04 Javascript
详解Angular2 之 结构型指令
2017/06/21 Javascript
easyui简介_动力节点Java学院整理
2017/07/14 Javascript
详解ES6之用let声明变量以及let loop机制
2017/07/15 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
2019/08/27 jQuery
解决layer.open后laydate失效的问题
2019/09/06 Javascript
如何HttpServletRequest文件对象并储存
2020/08/14 Javascript
python 基础学习第二弹 类属性和实例属性
2012/08/27 Python
Python编程实现生成特定范围内不重复多个随机数的2种方法
2017/04/14 Python
[原创]教女朋友学Python(一)运行环境搭建
2017/11/29 Python
解决tensorflow模型参数保存和加载的问题
2018/07/26 Python
获取django框架orm query执行的sql语句实现方法分析
2019/06/20 Python
python实现银行管理系统
2019/10/25 Python
个性化皮包、小袋、生活配件:Mon Purse
2019/03/26 全球购物
空指针到底是什么
2012/08/07 面试题
经典c++面试题四
2015/05/14 面试题
成品仓管员岗位职责
2013/12/11 职场文书
争做文明公民倡议书
2014/08/29 职场文书
合作经营协议书范本
2014/09/16 职场文书
党员批评与自我批评(5篇)
2014/09/23 职场文书
golang 实现时间戳和时间的转化
2021/05/07 Golang
详解python字符串驻留技术
2021/05/21 Python