vue 切换标签显示隐藏

在 Vue 中，可以使用 `v-show` 指令来控制元素的显示与隐藏。 `v-show` 的值为一个表达式，当表达式的值为 true 时，元素会显示；当表达式的值为 false 时，元素会隐藏。

下面是一个示例：

<div id="app">
  <button @click="showTab = 'tab1'">Tab 1</button>
  <button @click="showTab = 'tab2'">Tab 2</button>
  <button @click="showTab = 'tab3'">Tab 3</button>
  
  <div v-show="showTab === 'tab1'">Tab 1 content</div>
  <div v-show="showTab === 'tab2'">Tab 2 content</div>
  <div v-show="showTab === 'tab3'">Tab 3 content</div>
</div>

new Vue({
  el: '#app',
  data: {
    showTab: 'tab1'
  }
});

在上面的例子中，我们使用了三个按钮来切换标签，每个按钮都绑定了一个 `click` 事件，当按钮被点击时，我们将 `showTab` 的值设置为对应的标签名。然后使用 `v-show` 指令来控制标签内容的显示与隐藏。

需要注意的是，使用 `v-show` 指令隐藏的元素仍然会被渲染到页面中，只是被设置为了 `display: none`。如果需要完全从页面中移除元素，可以使用 `v-if` 指令。