1单选
<template>中
<!--单选标签-->
<div class="course-box">
<div v-for="(target,id) in tagList" :key="id" @click="choseprofrom(id)">
<div class="course-box-item" v-bind:class="{'secectBackground':flag==id}">{{target.name}}</div >
</div>
</div>
<script>中
tagList:[
{name:"标签1",id:1,},
{name:"标签2",id:2,},
{name:"标签3",id:3,},
{name:"标签4",id:4,},
{name:"标签5",id:5,},
],
data() {
return {
flag: -1,
}}
methods:{
choseprofrom:function (id) {
this.flag = id;
}
}
<style>中
.course-box{
display: flex;
flex-wrap: wrap;
margin-top: 25/75rem;
.course-box-item {
height: 80/75rem;
padding-left: 67/75rem;
padding-right: 67/75rem;
border-radius: 4px;
border: 2/75rem solid #666666;
margin-right: 20/75rem;
margin-bottom: 20/75rem;
color: #666666;
font-size: 36/75rem;
align-items: center;
display: flex;
}
.secectBackground{
height: 80/75rem;
padding-left: 67/75rem;
padding-right: 67/75rem;
border-radius: 4px;
border: 2/75rem solid #C81623;
margin-right: 20/75rem;
margin-bottom: 20/75rem;
color: #C81623;
font-size: 36/75rem;
align-items: center;
display: flex;
}
}
//多选
<!--标签-->
<div class="course-box">
<div v-for="(target,index) in tagList" :key="index" @click="choseprofrom(target)">
<div class="course-box-item" v-bind:class="{secectBackground:target.checked}">{{target.name}}</div >
</div>
</div>
data() {
return {
flags: [],
}
}
点击事件
choseprofrom:function (item) {
let that = this
if(typeof item.checked=='undefined'){
this.$set(item,"checked",true)
}else{
item.checked=!item.checked;
}
if(item.checked){
that.flags.push(item.id)
} else {
for(var i = 0;i<that.flags.length;i++){
if(that.flags[i] === item.id){
that.flags.splice(i,1)
}
}
}
}