这是一个标签组件 <template> <SeptTabs :data="data" v-model="current"></SeptTabs> </template> <script> export default { data() { return { data:[ { icon: "application2", label: "标签1", code:'1' }, { label: "标签2", code:'2' }, ], current: 0,}}} </script> (属性 :only。说明:双向绑定值改为code属性。数据类型 :Boolean 默认值:false)。 (事件名:exe-change ,说明:激活的标签改变时触发,返回当前被激活的标签内容,返回值:被选中项的数据) code是唯一标识 请问 我该怎么做才能点击不同的标签后 显示不同标签的内容
时间: 2024-02-10 17:12:12 浏览: 26
你可以在模板中使用`v-if`或`v-show`指令来根据当前激活的标签来显示不同的内容。具体而言,你可以在`<SeptTabs>`组件外部定义多个内容区域,然后在`exe-change`事件中根据返回的选中项数据来切换显示区域。
例如:
```
<template>
<div>
<SeptTabs :data="data" v-model="current" :only="only" @exe-change="handleTabChange"></SeptTabs>
<div v-if="currentTab.code === '1'">
<!-- 标签1对应的内容 -->
</div>
<div v-if="currentTab.code === '2'">
<!-- 标签2对应的内容 -->
</div>
</div>
</template>
<script>
export default {
data() {
return {
data: [
{
icon: "application2",
label: "标签1",
code: "1",
},
{
label: "标签2",
code: "2",
},
],
current: 0,
only: true,
currentTab: null,
};
},
methods: {
handleTabChange(tab) {
this.currentTab = tab;
},
},
};
</script>
```
在上面的代码中,我们定义了两个内容区域,分别对应标签1和标签2。在`handleTabChange`方法中,我们将选中的标签数据保存到`currentTab`属性中,并在模板中使用`v-if`指令根据`currentTab.code`来判断显示哪个内容区域。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<template> <a-menu v-model="current" mode="horizontal"> <a-menu-item key="mail"> <a-icon type="mail" />Navigation One </a-menu-item> <a-menu-item key="app" disabled> <a-icon type="appstore" />Navigation Two </a-menu-item> <a-sub-menu> <a-icon type="setting" />Navigation Three - Submenu <a-menu-item-group title="Item 1"> <a-menu-item key="setting:1"> Option 1 </a-menu-item> <a-menu-item key="setting:2"> Option 2 </a-menu-item> </a-menu-item-group> <a-menu-item-group title="Item 2"> <a-menu-item key="setting:3"> Option 3 </a-menu-item> <a-menu-item key="setting:4"> Option 4 </a-menu-item> </a-menu-item-group> </a-sub-menu> <a-menu-item key="alipay"> Navigation Four - Link </a-menu-item> </a-menu> </template> <script> export default { data() { return { current: ['mail'], }; }, }; </script>解释一下这段代码
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)