<SeptTabs :data="delData" v-model="current" @exe-change="handleTabChange"> <div v-show="current === 0"> 111111111 </div> <div v-show="current === 1"> 2222222222 </div> </SeptTabs> methods里面的点击事件我该怎么写才能显示展示组件1或者组件2
时间: 2023-10-10 17:10:16 浏览: 33
你可以在 `methods` 中定义 `handleTabChange` 方法来处理 `@exe-change` 事件,实现切换展示组件1或者组件2的功能。在 `handleTabChange` 方法中,可以通过改变 `current` 变量的值来实现切换。
例如,如果你想让点击第一个标签页时展示组件1,点击第二个标签页时展示组件2,可以像这样实现 `handleTabChange` 方法:
```
methods: {
handleTabChange(index) {
// index 是当前选中的标签页的索引,从0开始计数
if (index === 0) {
this.current = 0; // 切换到展示组件1
} else if (index === 1) {
this.current = 1; // 切换到展示组件2
}
}
}
```
在这个例子中,我们通过判断当前选中的标签页的索引来决定展示哪个组件,然后改变 `current` 变量的值来切换展示。
同时,在 `<SeptTabs>` 组件中,我们通过 `@exe-change` 事件将 `handleTabChange` 方法绑定到组件上,这样当用户点击标签页时就会触发该方法。
相关问题
<SeptTabs :data="delData" v-model="current" @exe-change="handleTabChange"> <div v-show="current === 0"> 111111111 </div> <div v-show="current === 1"> 2222222222 </div> </SeptTabs>怎么样才能显示展示组件1或者2
这段代码使用了自定义组件 SeptTabs,其中的 v-model="current" 绑定了一个名为 current 的响应式变量,@exe-change="handleTabChange" 绑定了一个名为 handleTabChange 的方法。
要显示展示组件1或者2,需要根据 current 的值来判断。当 current 值为 0 时,展示组件1,当 current 值为 1 时,展示组件2。
具体实现方式是在组件内部使用 v-show 指令,根据 current 的值来判断是否展示组件。例如:
```
<SeptTabs :data="delData" v-model="current" @exe-change="handleTabChange">
<div v-show="current === 0">
111111111
</div>
<div v-show="current === 1">
2222222222
</div>
</SeptTabs>
```
在这个例子中,当 current 的值为 0 时,展示 `<div>` 标签内的内容,当 current 的值为 1 时,展示另一个 `<div>` 标签内的内容。
这是一个标签组件 <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> (事件名:exe-change ,说明:激活的标签改变时触发,返回当前被激活的标签内容,返回值:被选中项的数据) code是唯一标识 请问 我该怎么做才能点击不同的标签后 显示不同标签的内容
你可以在`exe-change`事件中获取当前选中的标签数据,然后根据这个数据来切换显示不同的标签内容。具体而言,你可以在模板中使用`v-if`或`v-show`指令来根据当前激活的标签来显示不同的内容。
例如:
```
<template>
<div>
<SeptTabs :data="data" v-model="current" @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,
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)
![](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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)