vue手写tab切换
时间: 2023-11-01 16:57:28 浏览: 48
以下是一个Vue手写Tab切换的示例代码:
```html
<template>
<div>
<span
v-for="(item, index) in title"
:key="index"
:class="{ active: num === index, tabs: true }"
@click="num = index"
>
{{ item }}
</span>
<div v-for="(content, index) in contents" :key="index" v-show="num === index">
{{ content }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
title: ['Tab 1', 'Tab 2', 'Tab 3'],
contents: ['Content 1', 'Content 2', 'Content 3'],
num: 0
};
}
};
</script>
<style scoped>
.active {
color: yellow;
}
.tabs {
cursor: pointer;
display: inline-block;
width: 120px;
height: 50px;
line-height: 50px;
text-align: center;
}
</style>
```
这是一个简单的Vue组件,实现了Tab切换的功能。在`data`中定义了`title`和`contents`数组,分别表示Tab的标题和内容。通过`v-for`指令将标题渲染为`span`元素,并监听点击事件来切换`num`的值,从而实现Tab的切换效果。利用`v-show`指令根据`num`的值显示对应的内容。
希望以上代码可以帮到您。如果您还有其他问题,请随时提问。