class动态状态使用

Posted 2021-02-18 hwj369

<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>