Vue實現(xiàn)簡單選項卡功能

更新時間：2022年03月01日 11:44:41 作者：林飛的夢囈

這篇文章主要為大家詳細介紹了Vue實現(xiàn)簡單選項卡功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Vue實現(xiàn)簡單選項卡的具體代碼，供大家參考，具體內(nèi)容如下

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>

渲染數(shù)據(jù)后，上面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>