对于带有多个选项卡的tabsheet，正确的声明性语法是什么？

<template>
  <div>
    <div v-for="tab in tabs" :key="tab.id">
      <button @click="selectTab(tab)">{{ tab.title }}</button>
    </div>
    <div v-show="selectedTab">
      <!-- 内容区域 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { id: 1, title: 'Tab 1' },
        { id: 2, title: 'Tab 2' },
        { id: 3, title: 'Tab 3' }
      ],
      selectedTab: null
    };
  },
  methods: {
    selectTab(tab) {
      this.selectedTab = tab;
    }
  }
};
</script>

import React, { useState } from 'react';

const Tabs = () => {
  const [selectedTab, setSelectedTab] = useState(null);

  const tabs = [
    { id: 1, title: 'Tab 1' },
    { id: 2, title: 'Tab 2' },
    { id: 3, title: 'Tab 3' }
  ];

  const selectTab = (tab) => {
    setSelectedTab(tab);
  };

  return (
    <div>
      {tabs.map((tab) => (
        <div key={tab.id}>
          <button onClick={() => selectTab(tab)}>{tab.title}</button>
        </div>
      ))}
      {selectedTab && (
        <div>
          {/* 内容区域 */}
        </div>
      )}
    </div>
  );
};

export default Tabs;