<template>
  <div>
    <ul class="title-wrap">
      <li
        class="title-item"
        :class="{ titleActived: activeTab === 'tutorial' }"
        @click="changeTab('tutorial')"
      >
        使用教程
      </li>
      <li
        class="title-item"
        :class="{ titleActived: activeTab === 'product' }"
        @click="changeTab('product')"
      >
        产品介绍
      </li>
      <li
        class="title-item"
        :class="{ titleActived: activeTab === 'news' }"
        @click="changeTab('news')"
      >
        行业资讯
      </li>
    </ul>
    <!-- 根据当前选中的标签显示对应的内容 -->
    <div v-if="activeTab === 'tutorial'">
      使用教程的内容
    </div>
    <div v-if="activeTab === 'product'">
      产品介绍的内容
    </div>
    <div v-if="activeTab === 'news'">
      行业资讯的内容
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'tutorial' // 默认选中的标签
    };
  },
  methods: {
    changeTab(tab) {
      this.activeTab = tab; // 切换选中的标签
    }
  }
};
</script>