Vue——19——组件的切换(使用v-if和v-else,component元素

最新推荐文章于 2024-05-09 15:52:22 发布

野生小米椒

最新推荐文章于 2024-05-09 15:52:22 发布

阅读量556

点赞数

分类专栏： VUE框架

本文链接：https://blog.csdn.net/x1037490413/article/details/107147410

版权

VUE框架专栏收录该内容

33 篇文章 0 订阅

订阅专栏

组件的切换

一：使用v-if和v-else
二:使用component
三:组件切换动画

一：使用v-if和v-else

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>

</head>

<body>
    <div id="app">
        <a href="" @click.prevent="flag=true">登录</a>
        <a href="" @click.prevent="flag=false">注册</a>
       <login v-if="flag"></login>
       <register v-else="flag"></register>
    </div>
  
    <script>
       Vue.component('login',{
           template:'<h3>登录组件</h3>'
       })
       Vue.component('register',{
           template:'<h3>注册组件</h3>'
       })
        var vm = new Vue({
            el: "#app",
            data: {
                flag:true
            },
            methods: {}
        })
    </script>
</body>

</html>

二:使用component

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>

</head>

<body>
    <div id="app"> 
        <a href=""  @click.prevent="comName='login'">登录</a>
        <a href=""  @click.prevent="comName='register'">注册</a>
      <!-- vue提供了component来展示对应名称的组件 -->
      <!-- component是一个占位符:is属性可以用来指定要展示的组件的名称 -->
      <!-- <component :is="'login'"></component> -->
      <component :is="comName"></component>
    </div>
  
    <script>
        //组件名称是字符串
      Vue.component('login',{
          template:"<h3>登录组件</h3>"
      })
      Vue.component('register',{
          template:"<h3>注册组件</h3>"
      })
        var vm = new Vue({
            el: "#app",
            data: {
               comName:'login'//当前component中的:is绑定的组件的名称
            },
            methods: {}
        })
    </script>
</body>

</html>

三:组件切换动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
     <style>
         .v-enter,.v-leave-to{
             opacity: 0;
             transform:translateX(150px) ;
         }
         .v-enter-active,.v-leave-to{
             transition: all 0.8s ease;
         }
     </style>
</head>

<body>
    <div id="app"> 
        <a href=""  @click.prevent="comName='login'">登录</a>
        <a href=""  @click.prevent="comName='register'">注册</a>
     <!-- 通过mode属性 设置组件切换的模式 先出后进 -->
      <transition mode="out-in">
       
       <component :is="comName"></component>
      </transition>
     
     
    </div>
  
    <script>
        //组件名称是字符串
      Vue.component('login',{
          template:"<h3>登录组件</h3>"
      })
      Vue.component('register',{
          template:"<h3>注册组件</h3>"
      })
        var vm = new Vue({
            el: "#app",
            data: {
               comName:'login'//当前component中的:is绑定的组件的名称
            },
            methods: {}
        })
    </script>
</body>

</html>

野生小米椒

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue——19——组件的切换(使用v-if和v-else,component元素

组件的切换一：使用v-if和v-else一：使用v-if和v-else<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> &l
复制链接

扫一扫