uni-app选中状态并改变颜色

标签：v-for   改变颜色   methods   details   ring   lse   取值   color   字符串   

思路    
定义一个数组来记录被点击的元素  arr
数组通过indexOf来来查找 
如果有,激活类就是true
没有； 激活类为false
这一步最关键的是查找的内容就是显示出来的index，
		
点击的时候传递参数（key），通过indexOf查找
如果没有 push到arr;
若是有；splice删除这个元素




看了上面这个一段代码，发现的问题
1==》 rSelect在data中声明的是一个数组； 但是在html中 indexOf这个方法是对字符串使用的   【数组也有indexOf  用法跟字符串是一样的哈  ok】
2==》 rSelect在data中声明的是一个数组； 在方法中又是indedxOf和push对它进行操作，这样也可以？ 【可以】
splice(‘删除元素的起始下标‘,‘删除个数‘)它是对数组进行操作的   
它到底是一个啥子类型的；

=====================================
这个文章就可以就可以解决你的疑问了 https://blog.csdn.net/weixin_41829196/article/details/90482193

var arr = [1,2,3];
console.log(arr.indexOf(1));//0
console.log(arr.indexOf(2));//1
console.log(arr.indexOf(3));//2
console.log(arr.indexOf(4));//-1

该方法返回某个元素在数组中的位置。
返回元素在数组中的位置，若没检索到，则返回 -1。
array.indexOf(item,start)
参数	描述
item	必须。查找的元素
start	可选。规定检索的位置，它的合法取值是 0 到 stringObject.length - 1
================================

字符串的indexOf和数组的indexOf用法一致的哈
字符串的indexOf和数组的indexOf用法一致的哈
字符串的indexOf和数组的indexOf用法一致的哈

<template>
  <view>
     <view class="deom-flex">
         <view class="defa" :class="{‘active‘: rSelect.indexOf(index)!=-1}"
            v-for="(value,index) in infoArr" 
            :key="index" @tap="tapInfo(index)">
              {{value.name}}
         </view>
     </view>
  </view>
</template>

<script>
export default {
 data(){
   return{
      infoArr:[{name:"直播"},{name:"视频"},{name:"手游"}],
       rSelect:[]
  }
},
methods:{
	tapInfo(e) {
		console.log(this.rSelect )//是数组，数组也有indexOf
		if (this.rSelect.indexOf(e) == -1) {
			console.log(e)//打印下标
			this.rSelect.push(e);//选中添加到数组里
		} else {
			this.rSelect.splice(this.rSelect.indexOf(e), 1); //取消
		}
	}
},
}
</script>

<style scoped>
.deom-flex{
  display: flex;
}
.defa{
	width: 100rpx;
	height: 50rpx;
	margin-right: 10rpx;
}
.active{
	width: 100rpx;
	height: 50rpx;
	color: white;
	border: 1px solid #e5e5e5;
	background-color: #ff5d00;
}
</style>

uni-app选中状态并改变颜色

标签：v-for   改变颜色   methods   details   ring   lse   取值   color   字符串   

原文地址：https://www.cnblogs.com/ishoulgodo/p/13648791.html