vue选项卡切换内容

可以使用Vue.js的动态绑定和条件渲染来实现选项卡切换内容。

1. 在Vue实例中定义一个变量`selectedTab`，用于存储当前选中的选项卡的索引：

data() {
  return {
    selectedTab: 0
  }
}

2. 在模板中使用`v-for`渲染选项卡的标题，并使用`v-bind:class`绑定样式类来高亮当前选中的选项卡：

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

3. 在模板中使用`v-if`和`v-else`条件渲染来显示当前选中的选项卡的内容：

<div class="tab-content">
  <div v-for="(tab, index) in tabs" :key="index" v-if="selectedTab === index">
    {{ tab.content }}
  </div>
</div>

完整代码示例：

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

<script>
export default {
  data() {
    return {
      selectedTab: 0,
      tabs: [
        { title: 'Tab 1', content: 'This is tab 1 content.' },
        { title: 'Tab 2', content: 'This is tab 2 content.' },
        { title: 'Tab 3', content: 'This is tab 3 content.' }
      ]
    }
  }
}
</script>

<style>
.tabs ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.tabs li {
  cursor: pointer;
  padding: 10px;
  margin-right: 10px;
  border: 1px solid #ccc;
}

.tabs li.active {
  background-color: #ccc;
}

.tab-content {
  margin-top: 10px;
  border: 1px solid #ccc;
  padding: 10px;
}
</style>