这篇文章将为大家详细讲解有关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>
关于“Vue如何实现简单选项卡功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。