How to implement Tab components in vue

This article mainly shows you "vue how to achieve tab components", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "vue how to implement tab components" this article.

The details are as follows

Main function: click on different options to display different content

Html

$(document) .ready (function () {var app=new Vue ({el: "# app", data: {activeKey: '1badge / selected option}});}) I'm Zhang San, I'm Li Si, I'm Niu Wu.

Pane.js

Vue.component ('pane', {name:' pane', template:'\', data: function () {return {show: true}}, props: {name: {type: String}, label: {type: String Default:''}}, methods: {updateNav () {this.$parent.updateNav () }, watch: {label () {this.updateNav ();}, mounted () {this.updateNav ();}})

Tabs.js

Vue.component ('tabs', {template:'\ {item.label}}\\', props: {value: {type: [String Number]}, data: function () {return {currentValue: this.value, navList: []}}, methods: {tabCls: function (item) {return ['tabs-tab' {'tabs-tab-active': item.name===this.currentValue}]}, / / traverses all child elements getTabs () {return this.$children.filter (function (item) {return item.$options.name==='pane') that are pane });}, / / put label name in the pane child element into the navList array updateNav () {this.navList= []; var _ this=this This.getTabs () .forEach (function (pane,index) {_ this.navList.push ({label: pane.label, name: pane.name | | index}); if (! pane.name) pane.name=index If (index===0) {if (! _ this.currentValue) {_ this.currentValue=pane.name | | index;}); this.updateStatus ();}, updateStatus () {var tabs=this.getTabs (); var _ this=this / / displays the currently selected tabs.forEach (function (tab) {return tab.show=tab.name===_this.currentValue;})}, handleChange: function (index) {var nav = this.navList [index]; var name=nav.name; this.currentValue=name; this.$emit ('input',name) This.$emit ('on-click',name);}}, watch: {value: function (val) {this.currentValue=val;}, currentValue: function () {this.updateStatus ();}) these are all the contents of the article "how to implement tab components in vue". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!