vue组件切换

关注

转载最新推荐文章于 2026-06-01 14:40:57 发布 363 阅读 AI 写同款· GEO 优化 ›

vue table切换组件如果vue单页开发没有使用ui组件，table切换的功能还是比较烦人的。闲暇时间看书写了一个table切换的组件，和大家分享一下，效果图如下：主要有两个组件页面，第一个是 tabs.vue，这个页面上会循环出table标签和每个标签对应的内容，大部分的事件处理也在这个页面上。代码如下：<template> <div class="tabs"> &l... 阅读详情

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style>
        li{
        border:1px solid dashed;
    }
    li:hover{
        background: pink;
        transition: all 1s;
    }
    .v-enter,.v-leave-to{
        opacity: 0;
        transform: translateY(80px);
    }
    .v-enter-active,.v-leave-active{
        transition: all .6s ease;
    }
    .v-move{
        transition: all .6s ease;
    }
    .v-leave-active{
        position: absolute;

    }
    </style>
</head>

<body>

    <div id="app">
        <button @click="flag=!flag">click</button>
        <login v-if="flag"></login>
        <register v-else></register>
    </div>
        <template id="login">
            <div>login</div>
        </template>
        <template id="register">
            <div>register</div>
        </template>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>

    <script type="text/javascript">

        Vue.component('login', {
                    template: '#login'
                });
        Vue.component('register', {
            template: '#register'
        });
        var vm = new Vue({
            el: '#app',
            data(){
                return{
                    flag: true
                }
            },
            methods: {

            }
        })
    </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style>
        li{
        border:1px solid dashed;
    }
    li:hover{
        background: pink;
        transition: all 1s;
    }
    .v-enter,.v-leave-to{
        opacity: 0;
        transform: translateY(80px);
    }
    .v-enter-active,.v-leave-active{
        transition: all .6s ease;
    }
    .v-move{
        transition: all .6s ease;
    }
    .v-leave-active{
        position: absolute;

    }
    </style>
</head>

<body>

    <div id="app">
        <button @click="comp='login'">login</button>
        <button @click="comp='register'">register</button>
        <component :is="comp"></component>
    </div>
        <template id="login">
            <div>login</div>
        </template>
        <template id="register">
            <div>register</div>
        </template>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>

    <script type="text/javascript">

        Vue.component('login', {
                    template: '#login'
                });
        Vue.component('register', {
            template: '#register'
        });
        var vm = new Vue({
            el: '#app',
            data(){
                return{
                    flag: true,
                    comp: 'login'
                }
            },
            methods: {

            }
        })
    </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style>

    .v-enter,.v-leave-to{
        opacity: 0;
        transform: translateY(150px);
    }
    .v-enter-active,.v-leave-active{
        transition: all .6s ease;
    }
    </style>
</head>

<body>

    <div id="app">
        <button @click="comp='login'">login</button>
        <button @click="comp='register'">register</button>
        <transition mode="out-in">
            <!-- 使上一个component立即消失 -->
            <component :is="comp"></component>
        </transition>
    </div>
        <template id="login">
            <div>login</div>
        </template>
        <template id="register">
            <div>register</div>
        </template>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>

    <script type="text/javascript">

        Vue.component('login', {
                    template: '#login'
                });
        Vue.component('register', {
            template: '#register'
        });
        var vm = new Vue({
            el: '#app',
            data(){
                return{
                    flag: true,
                    comp: 'login'
                }
            },
            methods: {

            }
        })
    </script>
</body>

</html>

收录于