tab标签切换手写代码实现

最新推荐文章于 2024-04-14 15:25:06 发布

原创最新推荐文章于 2024-04-14 15:25:06 发布 · 228 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html #javascript

vue实操专栏收录该内容

5 篇文章

订阅专栏

这是一个关于Vue组件交互和样式的实例。通过点击`AAAAAA`和`BBBBBB`按钮，可以切换边框样式，同时控制`showFlag`变量显示不同内容。此代码段展示了如何在Vue中使用事件处理和条件渲染实现组件间的交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div class="markRate_card">
    <div class="markRate_title">
      <div
        id="title_fgs"
        :class="borderFlag == 'fgs' ? 'btnActive' : ''"
        @click="showBorderFlag('fgs')"
      >
        AAAAAA
      </div>
      <div
        id="title_sb"
        :class="borderFlag == 'sb' ? 'btnActive' : ''"
        @click="showBorderFlag('sb')"
      >
        BBBBBB
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'MarketRate',
  data() {
    return {
      borderFlag: 'fgs',
      showFlag: true
    }
  },
  computed: {},
  methods: {
    showBorderFlag(type) {
      this.borderFlag = type
      if (type === 'fgs') {
        this.showFlag = true
      } else {
        this.showFlag = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.markRate_card {
  background: #ffffff;
  border: 1px solid #eff2f7;
  border-bottom: none;
  border-radius: 2px;
  cursor: default;
  .markRate_title {
    width: 95%;
    background-color: #F6F6F6;
    display: flex;
    #title_fgs {
      width: 150px;
      text-align: center;
      color: #000000;
      font-size: 14px;
      line-height: 40px;
      cursor: pointer;
    }
    #title_sb {
      width: 150px;
      text-align: center;
      color: #000000;
      font-size: 14px;
      line-height: 40px;
      cursor: pointer;
    }
    .btnActive {
      width: 100%;
      height: 100%;
      border-top: 2px #872921 solid;
      background-color: #ffffff;
    }
  }
}
</style>