Vue选项卡功能
林飞的梦呓 人气:0vue-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>
加载全部内容