选项卡点击多选，再次点击取消选中，选项卡变色（uni)

一时失言乱红尘 2021-07-24 16:03 811阅读 0赞

## 效果 ##

![在这里插入图片描述][20201218101530667.png_pic_center]

## js部分 ##

redio_cli(e,ind){
    	this.xuanx.push(e)
    	console.log(this.xuanx)
    	let list = []
    	for (var i = 0; i < this.xuanx.length; i++) {
    		for (var o = 0; o < this.xuanx.length; o++) {
    			if(i != o && this.xuanx[i] == this.xuanx[o]){
    				list.push(this.xuanx[i])
    				// console.log(list)
    			}
    		}
    	}
    	// console.log(list)
    	// 判断重复删除
    	for (var i = 0; i < this.xuanx.length; i++) {
    		for (var o = 0; o < list.length; o++) {
    			if(i != o && this.xuanx[i] == list[o]){
    				this.xuanx.splice(i)
    				//上传的数据格式
    				let arr = ''
    				this.xuanx.forEach(it=>{
    					arr += it+','
    					this.xuanx_zj = arr.substr(0,arr.length -1)
    				})
    			}
    		}
    	}
    	//按钮变色
    	if (this.xuanxind.indexOf(ind) == -1) {
    		this.xuanxind.push(ind);//选中添加到数组里
    		console.log(this.xuanxind)
    	} else {
    		this.xuanxind.splice(this.xuanxind.indexOf(ind), 1); //取消
    	}
    }

## html ##

<view :class="xuanxind.indexOf(ind) != -1 ?'act' : 'yuan'" 
    v-for="(it,ind) in redio" :key="ind" @click="redio_cli(it,ind)">
    	{
       {it}}
    </view>

[20201218101530667.png_pic_center]: /images/20210724/28dade390ec3405b9de40582c3cc488f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，811人围观）

还没有评论，来说两句吧...

相关阅读

相关 JTabbedPane 点击+新建选项卡

JTabbedPane 点击+新建选项卡 1.需求描述 2.代码实现 3.效果演示 > 系统：Win10 > JDK：1.8.0\_333 >

墨蓝/ 2024年04月07日 14:43/ 0 赞/ 84 阅读

相关 JTabbedPane 点 x 关闭选项卡

JTabbedPane 点 x 关闭选项卡 1.需求描述 2.代码实现 3.效果演示 > 系统：Win10 > JDK：1.8.0\_333

小咪咪/ 2024年04月07日 14:43/ 0 赞/ 78 阅读

相关 Android TabLayout选项卡点击选中Ripple水波纹

Android TabLayout选项卡点击时候选中的Ripple水波纹如果要实现自定义的TabLayout选项卡被点击选中时候的水波纹效果，要从xml属性定义中的：

r囧r小猫/ 2023年10月18日 07:01/ 0 赞/ 12 阅读

相关改变对象属性$set,和原始写法引用场景：点击展开，再次点击关闭，或者点击选中，再次点击取消选中

<template> <div class="hello"> <h1>{ { msg }}</h1> <h2

た入场券/ 2023年05月21日 08:56/ 0 赞/ 47 阅读

相关 vue 非必填项单选点击一下选中再次点击取消

<el-form-item label="标段异常状态" prop="biddingState"> <el-radio-group v-mode

偏执的太偏执、/ 2022年10月11日 00:54/ 0 赞/ 284 阅读

相关 js radio点击选中再点击取消

$(function(){ $('input:radio').click(function(){

柔光的暖阳◎/ 2022年06月01日 10:25/ 0 赞/ 437 阅读

相关选项卡切换效果，点击切换图片

今天分享一篇前端开发实战当中经常使用到的选项卡切换效果的文章，希望对您有所帮助，欢迎留言探讨。 1、html结构布局： <div id="box">

太过爱你忘了你带给我的痛/ 2022年04月06日 05:41/ 0 赞/ 370 阅读

相关 vue element tabs 点击链接切换选项卡

一、业务需求工作中，用到element UI的el-tabs组件，tabs里面有几个<el-tab-pane>现在需要在第一个<el-tab-pane>内容中点击某个

古城微笑少年丶/ 2022年03月17日 06:06/ 0 赞/ 1025 阅读

相关 jquery checkbox点击选中，再点击取消选中

if(n==1){ if($("abs1").is(':checked')){ $("abs1"

刺骨的言语ヽ痛彻心扉/ 2021年12月04日 06:39/ 0 赞/ 488 阅读

相关选项卡点击多选，再次点击取消选中，选项卡变色（uni)

效果 ![在这里插入图片描述][20201218101530667.png_pic_center] js部分 redio_cli(e,ind){

一时失言乱红尘/ 2021年07月24日 16:03/ 0 赞/ 812 阅读