Without further ado, let’s look at the effects first
1. Upload the code
<div class="check-left" >
<div class="check-package"
:class="checkbox.includes(item.text)? 'active_four' : ''"
@click="changeAlgorithm(item,index)"
v-for="(item,index) in iconList" :key="index">
<p>
<meg-icon class="check-icon" :name="item.icon"></meg-icon>
<b class="check-text">{
{item.text}}</b>
</p>
</div>
</div>
// js
data() {
return {
checkbox:[],
iconList:[
{
icon:"face-person",
text:"脸人"
},
{
icon:"face-person",
text:"结构化"
},
{
icon:"face-person",
text:"入侵"
},
{
icon:"face-person",
text:"越界"
},
{
icon:"face-person",
text:"人员徘徊"
},
{
icon:"face-person",
text:"翻墙"
},
{
icon:"face-person",
text:"车辆禁停"
},
{
icon:"face-person",
text:"摔倒"
},
{
icon:"face-person",
text:"打电话"
},
{
icon:"face-person",
text:"看手机"
},
{
icon:"face-person",
text:"人员奔跑"
},
{
icon:"face-person",
text:"睡岗检测"
},
{
icon:"face-person",
text:"值岗超员"
},
{
icon:"face-person",
text:"值岗少员"
},
{
icon:"face-person",
text:"人员聚众"
},
{
icon:"face-person",
text:"人员扭打"
},
{
icon:"face-person",
text:"离开"
},
{
icon:"face-person",
text:"抽烟"
},
{
icon:"face-person",
text:"离岗检测"
},
],
}
methods: {
// 选择算法
changeAlgorithm(item,){
console.log(item,"选择算法",this.checkbox);
var idx = this.checkbox.indexOf(item.text);
console.log(idx)
//如果已经选中了，那就取消选中，如果没有，则选中
if(idx!=-1){
this.checkbox.splice(idx,1);
}else{
this.checkbox.push(item.text);
}
},
}
// css
.active_four{
background: red;
}