Vue实现简单选项卡功能
作者：林飞的梦呓
这篇文章主要为大家详细介绍了Vue实现简单选项卡功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Vue实现简单选项卡的具体代码，供大家参考，具体内容如下
vue-tab-demo
App.vue
<template>
<div id="app">
<Tab/>
</div>
</template>
<script>
import Tab from './components/Tab'
export default {
name: 'App',
components: {
Tab
}
}
</script>
<style>
ul, li {
list-style: none;
}
.clearfix {
zoom: 1;
}
.clearfix:after {
display: block;
content: '';
clear: both;
}
</style>先布局，写好样式
Tab.vue
<template>
<div id="tab">
<div class="tab-bar clearfix">
<a href="javascript:;">HTML</a>
<a href="javascript:;">CSS</a>
<a href="javascript:;">JavaScript</a>
<a href="javascript:;" class="active">Vue</a>
</div>
<div class="tab-con">
<div>HTML</div>
<div>CSS</div>
<div>JavaScript</div>
<div class="light">Vue</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
}
},
methods: {
}
}
</script>
<style scoped>
#tab {
width: 400px;
border: 1px solid #ccc;
margin: 60px auto 0;
}
.tab-bar {
width: 400px;
background-color: #ccc;
}
.tab-bar a {
float: left;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
text-decoration: none;
color: #000;
}
.tab-con div {
text-align: left;
height: 100px;
display: none;
}
.tab-bar .active {
background-color: #0099ff;
}
.tab-con .light {
display: block;
}
</style>
渲染数据后，上面Tab.vue修改后如下：
<template>
<div id="tab">
<div class="tab-bar clearfix">
<a href="javascript:;"
@click="tab(index)"
v-for="(item,index) in items"
:class="{active : index===curId}"
>{{item.item}}</a>
</div>
<div class="tab-con">
<div
v-show="index===curId"
v-for="(content, index) in contents" >{{content.content}}</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
curId: 0,
items: [
{item: 'HTML'},
{item: 'CSS'},
{item: 'JavaScript'},
{item: 'Vue'},
],
contents: [
{content: 'HTML'},
{content: 'CSS'},
{content: 'JavaScript'},
{content: 'Vue'},
]
}
},
methods: {
tab (index) {
this.curId = index;
}
}
}
</script>
<style scoped>
#tab {
width: 400px;
border: 1px solid #ccc;
margin: 60px auto 0;
}
.tab-bar {
width: 400px;
background-color: #ccc;
}
.tab-bar a {
float: left;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
text-decoration: none;
color: #000;
}
.tab-bar .active {
background-color: #0099ff;
}
.tab-con div {
text-align: left;
height: 100px;
}
</style>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。