tab切换样式改变

<template>
 <div @click="cur=0"  :class="[cur==0? 'nav-userh':'nav-user']">数据统计</div>

      <div @click="cur=1"  :class="[cur==1? 'nav-userh':'nav-user']">用户总人数</div>

    <div class="tab-content">
      <div v-show="cur==0">内容一</div>

      <div v-show="cur==1">内容二</div>

    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup () {
    const cur = ref(1)
    return { cur }
  }
})
</script>

<style scoped lang="less">
.nav-userh {
  color: red;
}
.nav-user {
  color: blue;
}
.tab-content{
  width: 100px;
  height: 100px;
  border: 1px solid red;
}
</style>
posted @ 2021-05-06 17:18  zjxgdq  阅读(131)  评论(0编辑  收藏  举报