如何利用vue实现一个选项卡切换效果

如何利用vue做一个选项卡切换效果，下面web建站小编给大家简单介绍一下具体实现代码！

具体实现代码如下：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in tabs" :key="index" :class="{ active: item.active }"
 @click="selectedTab = item">
        {{ item.name }}
      </li>
    </ul>

    <div v-for="(item, index) in tabs" :key="index" v-if="item.active">
      {{ item.content }}
    </div>
  </div>
</template>
 
<script>
  export default {
    data() {
      return {
        tabs: [
          { name: 'tab1', content: '内容1', active: true }, //默认
          { name: 'tab2', content: '内容2', active: false },
          { name: 'tab3', content: '内容3', active: false }
        ]
      }
    },
     
    computed: {
      selectedTab() {
        return this.tabs.find(item => item.active);
      }
    },
     
   methods: {
      selectTab(item) {
        this.tabs.forEach(item => item.active = false);
        item.active = true;
      }
    }
  }
</script>

vue实现表格的编辑，包括选择，合并，拆分，删除行/列，添加行/列

Motion for Vue：一个轻量级且功能强大的Vue3动画库

el-table合并行的通用方法（附js代码）

vue前端分页功能实现代码（附js代码）

el-table利用:row-style="rowClass"设置指定行变色

标签： vue效果, 选项卡切换

上面是“如何利用vue实现一个选项卡切换效果”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_4021.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！