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>
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。