index.html
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css"> <title>Tabs</title> </head> <body> <div id="app"> <tabs> <tab name="About us" :selected="true"> <h1>here is the content for about us</h1> </tab> <tab name="About culture"> <h1>here is the content for about culture</h1> </tab> <tab name="About vision"> <h1>here is the content for about vision</h1> </tab> </tabs> </div> <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script> <script src="main.js"></script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
main.js
实例
Vue.component('tabs',{
template:`
<div>
<div class="tabs">
<ul>
<li v-for="tab in tabs" :class="{'is-active': tab.isActive}">
<a href="#" @click="selectTab(tab)">{{ tab.name }}</a>
</li>
</ul>
</div>
<div class="tabs-details">
<slot></slot>
</div>
</div>
`,
data(){
return{
tabs:[]
}
},
created(){
// console.log(this.$children);
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}
},
data(){
return{
isActive:false
}
},
mounted(){
this.isActive = this.selected;
}
});
new Vue({
el:'#app',
});运行实例 »
点击 "运行实例" 按钮查看在线实例
