下面是一个使用Vue实现标签页的示例，标签包括”学习中”、”未学习”和”已完成”：htmlCopy

<template>
  <div>
    <div class="tabs">
      <div
        v-for="tab in tabs"
        :key="tab.id"
        :class="['tab', { 'active': currentTab === tab.id }]"
        @click="changeTab(tab.id)"
      >
        {{ tab.name }}
      </div>
    </div>

    <div class="content">
      <div v-if="currentTab === 'learning'">学习中的内容</div>
      <div v-if="currentTab === 'notStarted'">未学习的内容</div>
      <div v-if="currentTab === 'completed'">已完成的内容</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { id: 'learning', name: '学习中' },
        { id: 'notStarted', name: '未学习' },
        { id: 'completed', name: '已完成' }
      ],
      currentTab: 'learning'
    };
  },
  methods: {
    changeTab(tabId) {
      this.currentTab = tabId;
    }
  }
};
</script>

<style>
.tabs {
  display: flex;
}

.tab {
  padding: 10px;
  cursor: pointer;
}

.tab.active {
  background-color: #ccc;
}

.content {
  margin-top: 20px;
}
</style>

在这个示例中，我们使用v-for指令循环渲染标签，并根据当前选中的标签动态显示相应的内容。

标签数据存储在tabs数组中，每个标签对象都有一个id和name属性，分别表示标签的唯一标识和名称。

在模板中，我们根据tabs数组使用v-for指令渲染标签，并为每个标签添加点击事件。通过点击标签，我们调用changeTab方法来更新currentTab的值，以反映当前选中的标签。

根据currentTab的值，我们使用v-if指令来动态显示相应的内容。当currentTab为’learning’时，显示”学习中的内容”；当currentTab为’notStarted’时，显示”未学习的内容”；当currentTab为’completed’时，显示”已完成的内容”。

你可以根据需要调整样式，以使标签和内容适应你的设计要求。