vue中点击显示不同的状态

Posted 2020-11-24 fei3

<template>
    <div>
        <div @click="choosetype" class="searchbox">
            <span :class="curtype==1?‘active‘:‘‘" data-i="1">热销专区</span>
            <span :class="curtype==2?‘active‘:‘‘" data-i="2">水果蛋糕</span>
            <span :class="curtype==3?‘active‘:‘‘" data-i="3">网红蛋糕</span>
            <span :class="curtype==4?‘active‘:‘‘" data-i="4">千层蛋糕</span>
          </div>
    </div>
</template>
<script>
 
    export default {


        data() {
            return {
               curtype:1,//默认显示第一个
            }

        },
        methods:{
              choosetype(e){
                  console.log(111)
                  if(e.target.nodeName=="SPAN"){
                       this.curtype=e.target.dataset.i
                  }
              }
        }
       
        
    };


</script>
<style>
    /* 搜索专区 */
 .searchbox {
    display: flex;
    align-items: center;
    padding: 0 0.16rem;
    margin: 0.15rem 0;
    color: pink;
    font-size: 0.14rem;
  }
  /* 点击显示样式 */
  .searchbox span {
    margin-left: 0.2rem;
  }

  .searchbox .active {
    font-size: 0.18rem;
    font-weight: 600;
  }

  .searchbox img {
    width: 0.2rem;
    height: 0.2rem;
  }
</style>