How to implement simple Tab function in Vue

This article will explain in detail how to realize the simple tab function of Vue. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

The details are as follows

Vue-tab-demo

App.vue

Import Tab from'. / components/Tab'export default {name: 'App', components: {Tab}} ul, li {list-style: none;} .clearfix {zoom: 1;} .clearfix: after {display: block; content:'; clear: both;}

Lay out the layout first and write the style.

Tab.vue

HTML CSS JavaScript Vue HTML CSS JavaScript Vue export default {data () {return {}}, methods: {}} # 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;}

After rendering the data, the above Tab.vue is modified as follows:

{{item.item}} {{content.content}} 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 }} # 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;}

This is the end of the article on "how to achieve simple tab functions in Vue". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.