vue实现单击选中再次单击取消

使用场景：

当你写一个v-for循环出一个列表，在写一个点击事件，点击之后给一个class，列表某一个颜色突出，在点击取消颜色突出的场景

1.选中赋值的变量不是数组时

-------html
<div 
	:class="['recentOrderBut',recentOrdersArray == item.value ? 'recentOrderActive' : '', ]" 
	v-for="item in recentOrdersDic" 
	:key="item.value" 
	@click="recentOrdersRadioChange(item)" 
	style="user-select: none;">
	{{ item.label }}
</div>

-------js
data(){
	return{
		recentOrdersArray: -1,//不是数组，是一个值
		recentOrdersDic:{
			{
			  label: "不限",
			  value: "",
			},
			{
			  label: "1周内",
			  value: 7,
			},
			{
			  label: "2周内",
			  value: 14,
			},
		}
	}
}
methods:{
	recentOrdersRadioChange(item){
	  if (this.recentOrdersArray == -1) {
        this.recentOrdersArray = item.value;
      } else {
        this.recentOrdersArray = -1;
      }
	}
}

-------css
.recentOrderBut {
  padding: 5px 10px;
  border: 1px solid #909399;
  border-radius: 20px;
  font-size: 13px;
  line-height: 1;
  margin-right: 10px;
  cursor: pointer;
}
.recentOrderActive {
  border: 1px solid #409eff !important;
  color: #fff !important;
  background: #409eff;
}

2.选中赋值的变量是数组时

数组时我没有做，我做的不是数组时，这个数组时是我从网上看的，但是思维是没有错的，如果不行，就用组件的多选，网上有很多

<span v-for="item in subjects" :key="item" :class="{select: item.selected}" @click="changeCss(item)">{{ item.name }}</span>

data() {
  return {
    selectedItem: [],
    author: '微信公众号 haiyan',
    subjects: [
      { name: '历史', selected: false },
      { name: '地理', selected: false },
      { name: '生物', selected: false },
      { name: '政治', selected: false },
      { name: '技术', selected: false },
      { name: '物理', selected: false },
      { name: '化学', selected: false }
    ]
  }
},
changeCss:function (item) {
  if(!item.selected && this.selectedItem.length<3) {//选中状态时点击
    item.selected = true;//变为不选中状态
    this.selectedItem.push(item.name);//更新数组（不选中项）
  } else if(item.selected) {//不选中状态时点击
    item.selected = false;//变为选中状态
    const i = this.selectedItem.indexOf(item.name);//找到当前点击项
    this.selectedItem.splice(i, 1);//移除一个不选中项
  }
}

有用记得点赞，拒绝白嫖，嘻嘻

标签：vue,false,name,单击,selectedItem,selected,item,选中
来源： https://blog.csdn.net/wupinlong/article/details/118540960