vue3 根据点击列表，标签页只打开一个然后内容根据点击变化

要实现根据点击列表项来切换标签页并更新内容，你可以使用Vue.js 3中的动态组件和条件渲染来实现。下面是一个简单的示例：

首先，在你的组件中定义一个数据属性来存储当前选定的标签页索引和内容数据。例如：

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

    <div>
      <component :is="currentTab.component" :data="currentTab.data"></component>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { title: '标签1', component: 'Tab1', data: '内容1' },
        { title: '标签2', component: 'Tab2', data: '内容2' },
        { title: '标签3', component: 'Tab3', data: '内容3' }
      ],
      currentTab: null
    }
  },
  methods: {
    selectTab(index) {
      this.currentTab = this.tabs[index];
    }
  },
  mounted() {
    // 初始化默认选中第一个标签页
    this.selectTab(0);
  }
}
</script>

在上述示例中，通过循环遍历`tabs`数组，生成一个含有点击事件的列表项。点击某个列表项时，调用`selectTab`方法，将索引值作为参数传入，然后更新`currentTab`为对应的标签页对象。

在标签页部分，使用了动态组件`<component>`来根据`currentTab`的值动态渲染不同的组件，其中`:is`属性绑定了当前标签页的组件名，`:data`属性传递了相应的内容数据。

你需要根据实际需求自定义每个标签页的组件，并在`tabs`数组中定义它们的相关信息。

希望这个示例能帮助你实现根据点击列表项来切换标签页并更新内容。如果有任何疑问，请随时提问。