tab切换 vue

<template>
  <div>
    <button @click="currentTab = 'tab1'">Tab 1</button>
    <button @click="currentTab = 'tab2'">Tab 2</button>
    <div v-if="currentTab === 'tab1'">
      Content of Tab 1
    </div>
    <div v-if="currentTab === 'tab2'">
      Content of Tab 2
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      currentTab: 'tab1', // 默认显示第一个标签页
    };
  },
};
</script>

相关推荐

  1. tab切换 vue

    2024-04-09 09:20:06       14 阅读
  2. Vue实现table左右切换平滑过渡效果

    2024-04-09 09:20:06       10 阅读
  3. js实现tab切换

    2024-04-09 09:20:06       34 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-04-09 09:20:06       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-09 09:20:06       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-09 09:20:06       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-09 09:20:06       20 阅读

热门阅读

  1. Django中models的使用

    2024-04-09 09:20:06       15 阅读
  2. C++数字化声音信号处理和数控振荡合成

    2024-04-09 09:20:06       17 阅读
  3. react native 图片预览

    2024-04-09 09:20:06       12 阅读
  4. Linux Centos 安装Jenkins

    2024-04-09 09:20:06       14 阅读
  5. linux centos 定时任务,执行shell脚本

    2024-04-09 09:20:06       16 阅读
  6. terraform 阿里云创建ECS使用user_data

    2024-04-09 09:20:06       12 阅读
  7. R语言序列8——RMarkdown与数据报告自动化

    2024-04-09 09:20:06       11 阅读