vue组件切换

最新推荐文章于 2023-08-15 14:41:23 发布
最新推荐文章于 2023-08-15 14:41:23 发布
阅读量258 收藏
点赞数
分类专栏： vue 
<!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>
han_hanker
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue切换Tab动态渲染组件的操作
10-14
主要介绍了Vue切换Tab动态渲染组件的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue中处理组件切换的三种方式
xiaohanbaby的博客
09-23 3798
Vue中处理组件切换的三种方式： 1.v-if切换： v-if的方式来切换视图:创建和销毁(导致组件的状态不能留存) 2.v-show切换： 显示和隐藏,没有办法操作Dom结构(会保存组件的状态) 3.动态组件切换： 可以操作DOM, 并且可以留存下数据; 切换时触发的生命周期： 激活activated 冻结 deactivated 这两个方法; 用keep-alive可保存组件的状态 代码示例: <template> <div> <butt
Vue - 视图组件切换的方案
Maggieq8324的博客
09-13 2545
目录前言roure-view 切换视图组件v-if 切换视图组件component 切换视图组件 前言 Vue中切换视图组件的方案大致有三种 1、roure-view 适合大幅度视图切换 2、v-if 适合小幅度组件切换 3、component 动态组件 roure-view 切换视图组件 这个不多说了，之前的文章记录：Vue - route路由跳转 v-if 切换视图组件 这个比较简单，如下： <CommonOne v-if="true" /> <CommonTwo v-el
VUE切换组件
notagoodwriter的博客
01-06 3337
VUE切换组件
vue之组件切换
jiaowolaoliu111的博客
07-15 759
组件切换v-if与v-else，Vue中的页面结构是由不同组件构成的，不同组件可以适合不同页面，适合进行单页应用开发。通过v-if和v-else来判断登录页面。flag的值是布尔类型。当点击登录按钮时则显示登录页面，点击注册按钮时显示注册页面。...
vue组件开发之tab切换组件
CodingNoob
04-27 6988
&lt;template&gt; &lt;div class="tab-slider"&gt; &lt;div class="tab"&gt; &lt;span v-for="(item, index) in items" v-bind:class="{active: actived == index}" @click=&
移动端底部导航固定配合vue-router实现组件切换功能
10-16
经常遇到这样的需求，移动端中的导航并不是在顶部也不是在底部，而是在最底部且是固定的，当我们点击该导航项时会切换到...这篇文章主要介绍了移动端底部导航固定配合vue-router实现组件切换功能,需要的朋友可以参考下
vue组件开发之tab切换组件使用详解
10-14
主要为大家详细介绍了vue组件开发之tab切换组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
VUE 父子组件传递
02-23
HTML编码中，利用了Vue框架，在该框架下父子组件直接经常需要进行数据传递
【Vue2】动态组件的使用-切换组件和keep-alive，以及异步组件
weixin_44899940的博客
08-15 875
动态组件的使用-切换组件和keep-alive，以及异步组件。
Vue学习（二）
qq_42708400的博客
01-08 590
目录 Vue组件 组件中data的使用 组件切换 1、v-if与v-else实现两个组件的切换 2、component实现多个组件的切换 3、利用动画实现组件切换 组件传值 组件传方法 ref获取DOM元素和组件引用 Vue路由 重定向 设置选中路径高亮 路由传参 路由嵌套 ​watch、computed、methods的不同 Vue组件 组件是为了拆分Vue实例的代码量，以不同的组件划分不同的功能模块。这样需要什么功能就去调用对应组件即可。 模块化：从代码逻...
Vue实现动态组件的切换
weixin_56296590的博客
11-09 3987
在这里跟大家分享一下如何实现动态组件的切换，举个例子，就比如组件库中的Steps步骤条，我们可能会去实现一个步骤显示一个页面这样的一个功能。 首先我们要了解component组件，他是vue内置的一个组件，提供了一个is属性来动态的渲染组件 <!-- 通过is属性动态切换组件 --> <div class="steps-content"> <compoment :is="pro[current]"></compoment>
【Vue】组件和元素切换动画的实现
看花容易绣花难
09-22 1916
【Vue】组件和元素切换动画的实现
Vue中组件的切换（待补充）
qq_53152029的博客
09-01 338
不会引起url的变化，只是在页面中嵌入组件。
vue从入门到精通
10-31
专注提升vue0-5年开发经验在线提升进阶技术！课程均为一线互联网大咖亲自授课，为10年以上开发经验，和多年在线教育行业经验讲师亲授！
vue-动态切换组件 （点击事件，切换页面）
m0_56349322的博客
03-14 9920
效果直白讲： 点击事件，切换页面 例子：假设是在 App 组件里，有两个 button 按钮，点击 button1 显示一个页面，点击 button2 显示另个一页面。 步骤： 这个是正常上下组件所展示的界面 这个是点击按钮发生页面跳转的效果 步骤： ...
Vue--组件数据传递与组件切换
m0_63964179的博客
09-12 469
Box2:this.$emit("x","box2修改了数据") Box1:v-on="$listeners" Box:"@x="changex"" changex(val){log(val)} val="box2修改了数据"----父组件在子组件标签上### 子组件用prons接收value 然后就能当数据使用。获取元素节点 如父组件A，子组件B，孙组件C。
Vue中组件的切换
ZZY1078689276的专栏
11-04 5366
文章目录示例源码结果分析   此处的组件切换使用的是Vue中的component组件中的is属性来实现的。该is属性实现的功能是根据组件名称的不同来切换显示不同的组件控件。 示例 源码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&am
vue组件切换时卡顿
最新发布
08-18
对于Vue组件切换时出现卡顿的情况，有几个可能的原因和解决方案： 1. 大量数据渲染：如果组件切换涉及大量数据的渲染，可能会导致卡顿。此时可以考虑进行分页加载或者使用虚拟滚动等技术，减少一次性渲染的数据量。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值