使用flag标识符结合v-if和v-else切换组件

  1. 页面结构：（缺点：只适用于两个组件间切换，不适合多个）

 <div id="app">
     <input type="button" value="toggle" @click="flag=!flag">
     <my-com1 v-if="flag"></my-com1>
     <my-com2 v-else="flag"></my-com2>
   </div>

  1. Vue实例定义：

 <script>
     Vue.component('myCom1', {
       template: '<h3>奔波霸</h3>'
     })
 ​
     Vue.component('myCom2', {
       template: '<h3>霸波奔</h3>'
     })
 ​
     // 创建 Vue 实例，得到 ViewModel
     var vm = new Vue({
       el: '#app',
       data: {
         flag: true
       },
       methods: {}
     });
   </script>

使用:is属性来切换不同的子组件,并添加切换动画

  1. 组件实例定义方式：

   // 登录组件
     const login = Vue.extend({
       template: `<div>
         <h3>登录组件</h3>
       </div>`
     });
     Vue.component('login', login);
 ​
     // 注册组件
     const register = Vue.extend({
       template: `<div>
         <h3>注册组件</h3>
       </div>`
     });
     Vue.component('register', register);
 ​
     // 创建 Vue 实例，得到 ViewModel
     var vm = new Vue({
       el: '#app',
       data: { comName: 'login' },
       methods: {}
     });

  1. 使用component标签，来引用组件，并通过:is属性来指定要加载的组件：

   <div id="app">
     <a href="#" @click.prevent="comName='login'">登录</a>
     <a href="#" @click.prevent="comName='register'">注册</a>
     <hr>
     <transition mode="out-in">
       <component :is="comName"></component>
     </transition>
   </div>
 ​

  1. 添加切换样式：

   <style>
     .v-enter,
     .v-leave-to {
       opacity: 0;
       transform: translateX(30px);
     }
 ​
     .v-enter-active,
     .v-leave-active {
       position: absolute;
       transition: all 0.3s ease;
     }
 ​
     h3{
       margin: 0;
     }
   </style>

组件切换动画

1.把组件用transition标签包起来，定义mode

2.定义动画的样式

 <!DOCTYPE html>
 <html lang="en">
 ​
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <script src="./lib/vue-2.4.0.js"></script>
   <style>
     .v-enter,
     .v-leave-to {
       opacity: 0;
       transform: translateX(150px);
     }
 ​
     .v-enter-active,
     .v-leave-active {
       transition: all 0.5s ease;
     }
   </style>
 </head>
 ​
 <body>
   <div id="app">
     <a href="" @click.prevent="comName='login'">登录</a>
     <a href="" @click.prevent="comName='register'">注册</a>
 ​
     <!-- 通过 mode 属性,设置组件切换时候的 模式 -->
      <!-- 如果不使用mode 属性,一个组件还没完全走出去，切换的新组件就进来了，这样就乱套了 -->
     <transition mode="out-in">
       <component :is="comName"></component>
     </transition>
 ​
   </div>
 ​
   <script>
     // 组件名称是 字符串
     Vue.component('login', {
       template: '<h3>登录组件</h3>'
     })
 ​
     Vue.component('register', {
       template: '<h3>注册组件</h3>'
     })
 ​
     // 创建 Vue 实例，得到 ViewModel
     var vm = new Vue({
       el: '#app',
       data: {
         comName: 'login' // 当前 component 中的 :is 绑定的组件的名称
       },
       methods: {}
     });
   </script>
 </body>
 ​
 </html>
 ​

Vue学习笔记【24】——Vue组件（组件切换）的更多相关文章

  1. vue学习笔记（1）—— 组件化实现todoList

    一.环境搭建 1.npm 大型应用时推荐用npm安装,npm能很好的和webpack等模块打包器配合使用.具体安装步骤请参考网上的诸多教程.完成后使用如下命令安装vue. $ npm install ...

  2. 【Vue学习笔记】—— vue的基础语法 { }

    学习笔记 作者:oMing vue v-on: 简称 @ <div id='app'> <button v-on:click='Show1'> </button> ...

  3. vue学习笔记(二)vue的生命周期和钩子函数

    前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...

  4. vue学习笔记：vue的认识与特点与获取

    Vue了解 Vue:读作 view Vue是一个渐进式框架 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整 ...

  5. Vue学习笔记之Vue组件

    0x00 前言 vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来.组件的使用更使我们的项目解耦合.更加符合vue的设计思想MVVM. 那接下来就跟我看一下如何在一个Vue实例 ...

  6. Vue学习笔记（三）组件间如何通信传递参数

    一:父组件向子组件传递参数 <template > <div id="app"> <h1 v-text="title">&l ...

  7. vue学习笔记（五）— 组件通信

    关于vue父子组件通信 作者:狐狸家的鱼 本文链接:vue组件通信 GitHub:sueRimn 如果组件是一个单页面,组件之间存在父子关系,数据传递就需要根据父子不同的地位使用不同的办法. 借助新建 ...

  8. vue学习笔记（一）--Tab切换

    最近在学Vue,写的第一个demo是Tab,刚开始还直接把js代码贴过来改,没觉得有什么不同.然后请教别人说,用Vue最好不要操作dom啦,又把代码做了修改-_-. html代码如下: <div ...

  9. Android学习笔记(24):进度条组件ProgressBar及其子类

    ProgressBar作为进度条组件使用,它还派生了SeekBar(拖动条)和RatingBar(星级评分条). ProgressBar支持的XML属性: Attribute Name Related ...

  10. Vue学习笔记之Vue指令系统介绍

    所谓指令系统,大家可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了. 在vue中,指令系统,设置一些命令之后,来操作我们的数据属性,并展示到我们的DOM上. OK,接下来我们 ...

随机推荐

  1. python3.x current_question

    扩散四维过程遇到的问题,暂不能解决,但先收集起来. ''' list_str=['test', None, '', 'str', ' ', 'END'] data = filter(lambda st ...

  2. java SSLContext

    1. 什么是SSLSocket JDK文档指出,SSLSocket扩展Socket并提供使用SSL或TLS协议的安全套接字. 这种套接字是正常的流套接字,但是它们在基础网络传输协议(如TCP)上添加了 ...

  3. 04-树5 Root of AVL Tree（25 分）

    An AVL tree is a self-balancing binary search tree. In an AVL tree, the heights of the two child sub ...

  4. bzoj 3881 [Coci2015]Divljak——LCT维护parent树链并

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3881 对 S 建 SAM ,每个 T 会让 S 的 parent 树的链并答案+1:在 T ...

  5. [CSP-S模拟测试]:影子（并查集+LCA）

    题目描述 一个人有很多的影子,新的旧的,他们不断消失重来.学者的影子在他苍白色的精神图景里成为了$n$个黑色的点,他们伸长的触手交叉形成了一颗黑色的树.假使每个影子点拥有一个权值$d_i$,黑色的树边 ...

  6. 2的N次方求解-----C++

    2的N次方求解,一般情况如果不超出C/C++基本数据类型的表达范围,这个问题及其容易,但是如果N的值十分的大,以致于超出基本数据类型表达范围 下面的程序正是解决2的N次方这个大数精确求解的源码 #in ...

  7. 建立logback.xml 配合MDC 实现追踪

    <?xml version="1.0" encoding="UTF-8"?> <configuration debug="false ...

  8. 【转】Java类MemoryUsage查看虚拟机的使用情况

    原文地址:https://www.cnblogs.com/xubiao/p/5465473.html Java类MemoryUsage,通过MemoryUsage可以查看Java 虚拟机的内存池的内存 ...

  9. Rust <7>：数据结构==>链表

    enum List { Cons(u64, Box<List>), NULL, } impl List { fn new() -> List { List::NULL } fn pr ...

  10. mysql中tinyint(1)与tinyint(2)的区别

    tinyint 型的字段如果设置为UNSIGNED类型,只能存储从0到255的整数,不能用来储存负数.tinyint 型的字段如果不设置UNSIGNED类型,存储-128到127的整数. 1个tiny ...