<template>
<div>
<div class="change">
<p :class="selecttab== 'all'?'selected':'unSelected'" @click="hadleclick(1)">全部</p>
<p @click="hadleclick(2)" :class="selecttab== 'name'?'selected':'unSelected'">名称</p>
<p @click="hadleclick(3)" :class="selecttab== 'status'?'selected':'unSelected'"> 状态</p>
</div>
<div>
{{data}}
</div>
<div v-show="selecttab== 'all'">
gtfdsgfdhdghdg
</div>
<div v-show="selecttab== 'name'">
gfdgsfdgdgdfgdgdhhhhhhhhhhhh
</div>
<div v-show="selecttab== 'status'">
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</div>
</div>
</template>
<script>
export default {
data(){
return{
selecttab:'all',
data:'我是全部'
}
},
methods:{
hadleclick(e){
if (e == 2) {
this.selecttab = 'name'
this.data='我是名字'
}else if (e ==1 ) {
this.selecttab = 'all'
this.data='我是全部'
} else{
this.selecttab = 'status'
this.data='我是状态'
}
console.log(e)
}
}
}
</script>
<style lang="scss" scoped>
.change{
display: flex;
justify-content:flex-start;
p{
padding: 0 10px;
&:not(.selected){
background-color: blueviolet;
}
}
.selected{
height: 20px;
width: 50px;
border: 1px solid #fff;
background: #035c75c7;
}
}
.unSelected{
height: 20px;
width: 50px;
border: 1px solid #fff;
}
</style>
