Vue实例 动态组件实现选项卡
动态组件 选项卡
有n种实现方法 哈哈哈哈
<style>
#app{
width: 260px;
height: 200px;
background: #fff;
box-shadow: 0 0 10px #ccc;
margin:0 auto;
margin-top: 20%;
}
ul{ margin: 0; padding: 0; display: flex; flex-direction: row;}
ul li{
list-style: none;
height: 50px;
text-align: center;
line-height: 50px;
cursor: pointer;
flex: 1;
}
ul li:hover{
color: #00D2FD;
}
ul li.active{
border-bottom: 2px solid #00D2FD;
color: #00D2FD;
}
.content{
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li
v-for="(tab, index) in list"
v-bind:class="{active: active === index}"
v-on:click="toggleTab(index)"
>{{tab}}</li>
</ul>
<components class="content" :is="currentTab"></components>
</div>
<script>
var itema = {
template: "<p>Vue 学完就可以找工作了哦</p>"
}
var itemb = {
template: "<p>深入理解JS怎么就这么的难呢 fuck</p>"
}
var itemc = {
template: "<p>PHP有时间一定要去学</p>"
}
new Vue({
el: '#app',
components: {
itema,
itemb,
itemc
},
data: {
list: ['Vue', 'JS', 'PHP'],
coms: ['itema', 'itemb', 'itemc'],
currentTab: 'itema',
active: 0
},
methods: {
toggleTab (tab) {
this.currentTab = this.coms[tab];
this.active = tab;
}
}
})
</script>
