"vue ex"
Bootstrap 3.3.0 Snippet by irinashuvalova

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.css"> <style type="text/css">body { padding-top: 40px; }</style> </head> <body> <div id="root" class="container"> <tabs> <tab name="About Us" :selected="true"> <tab-content></tab-content> </tab> <tab name="About Out Culture"> <tab-content></tab-content> </tab> <tab name="About Our Vision"> <tab-content></tab-content> </tab> </tabs> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="main.js"></script> </body> </html>
Vue.component('tabs', { template: ` <div> <div class="tabs"> <ul> <li v-for="tab in tabs" :class="{ 'is-active': tab.isActive }"> <a :href="tab.href" @click="selectTab(tab)">{{tab.name}}</a> </li> </ul> </div> <div class="tabs-details"> <slot></slot> </div> </div> `, data() { return { tabs: [] }; }, created() { this.tabs = this.$children; }, methods: { selectTab(selectedTab) { this.tabs.forEach(tab => { tab.isActive = (tab.name == selectedTab.name); }) } } }); Vue.component('tab', { template: ` <div v-show="isActive"><slot></slot></div> `, props: { name: { required: true }, selected: { default: false } }, computed: { href() { return '#' + this.name.toLowerCase().replace(/ /g, '-'); } }, data() { return { isActive: false } }, mounted() { this.isActive = this.selected; } }) Vue.component('tab-content', { template: ` <h1>1{{this.isTab}}</h1> `, computed: { contents() { return this.isTab } }, data() { return { x: ['1', '2', '3'] } } }) new Vue({ el: '#root', data: { isTab: '1' } })

Related: See More

Material Kit PRO React

Questions / Comments: