Vue实例动态组件实现选项卡

最新推荐文章于 2022-02-26 16:38:02 发布

weixin_30446613

最新推荐文章于 2022-02-26 16:38:02 发布

阅读量553

点赞数

文章标签： javascript 数据库 ViewUI

原文链接：http://www.cnblogs.com/xiaobaiv/p/9163879.html

版权

动态组件选项卡

有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>

转载于:https://www.cnblogs.com/xiaobaiv/p/9163879.html

weixin_30446613

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
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;...
复制链接

扫一扫