vue组件切换—component标签实现多个组件的切换和组件动画的实现

最新推荐文章于 2024-06-21 11:09:47 发布

何迟

最新推荐文章于 2024-06-21 11:09:47 发布

阅读量6.3k

点赞数 2

分类专栏： Vue 前端开发也蛮有意思的

本文链接：https://blog.csdn.net/qq_42036616/article/details/82887668

版权

要点：

1. component是一个占位符，：is，用来指定展示组件的名称，通过绑定变量来实现切换

2.只需将<component>组件定义的标签用<transition>包裹起来即可

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
    
    <style>
        .v-enter,
        .v-leave-to{
            opacity: 0;
            transform: translateX(200px);
        }
        
        .v-enter-active,
        .v-leave-active{
           transition: all 1s ease; 
        }
    </style>
</head>
<body>
<div id="app">
    <a href="#" @click.prevent="flag='login'">登录</a>