组件切换方式一

 <!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/jquery2.1.4.min.js"></script>

     <script src="./lib/Vue2.5.17.js"></script>

     <link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel="stylesheet">

 </head>

 <body>

     <div id="app">

         <a href="" @click.prevent="flag=true">登录</a>

         <a href="" @click.prevent="flag=flase">注册</a>

         <login v-if="flag"></login>

         <register v-else="flag"></register>

     </div>

     <template id="userlogin">

         <div>

             <h1>用户登录界面</h1>

         </div>

     </template>

     <template id="userreg">

         <div>

             <h1>用户注册界面</h1>

         </div>

     </template>

     <script>

         Vue.component('login',{

             template : '#userlogin'

         });

         Vue.component('register',{

             template : '#userreg'

         })

         var vm = new Vue({

             el: '#app',

             data: {

                 flag : true

             },

             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">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <script src="./lib/jquery2.1.4.min.js"></script>

     <script src="./lib/Vue2.5.17.js"></script>

     <link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel="stylesheet">

 </head>

 <style>

     .v-enter,

     .v-leave-to{

         opacity: 0;

         transform: translateX(150px);

     }

     .v-enter-active,

     .v-leave-active{

         transition: all 0.5s ease;

     }

 </style>

 <body>

     <div id="app">

         <a href="" @click.prevent="comName='login'">登录</a>

         <a href="" @click.prevent="comName='register'">注册</a>

         <!-- 这是vue提供的 component 元素来展示对应名称的组件 -->

         <!-- component是一个占位符， :is 属性用来指定要展示的组件的名称 -->

         <!-- 组件名称是字符串，要用引号包起来 -->

         <!-- <component :is="'register'"></component> -->

         <!-- 使用变量的方式方便控制 -->

         <!-- 设置mode属性值为out-in，动画先出去再进来 -->

         <transition mode="out-in">

             <component :is="comName"></component>

         </transition>

         <!-- VUE提供的标签 ， component,template,transition, transitionGroup -->

     </div>

     <template id="userlogin">

         <div>

             <h1>这是登录组件</h1>

         </div>

     </template>

     <template id="userreg">

         <div>

             <h1>这是注册组件</h1>

         </div>

     </template>

     <script>

         Vue.component('login',{

             template : '#userlogin'

         });

         Vue.component('register',{

             template : '#userreg'

         })

         var vm = new Vue({

             el: '#app',

             data: {

                 comName : 'login' //当前component中的 :is 绑定的组件名称

             },

             methods: {},

         })

     </script>

 </body>

 </html>

Vue系列之 => 组件切换的更多相关文章

  1. Vue学习之组件切换及父子组件小结（八）

    一.组件切换: 1.v-if与v-else方式: <!DOCTYPE html> <html lang="en"> <head> <met ...

  2. [js高手之路] vue系列教程 - 组件定义与使用上部(7)

    组件是vue框架比较核心的内容,那么什么是组件呢? 通俗点讲:组件是由一堆html, css, javascript组成的代码片段, 作用是为了实现模块的重用 组件的基本用法: <div id= ...

  3. Vue 系列之 组件

    一个简单的 TodoList <body> <div id="root"> <div> <input type="text&qu ...

  4. Vue系列之 => 组件中的data和methods

    使用data <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  5. 【vue系列之三】从一个vue-pdf-shower，说说vue组件和npm包

    前言 从去年年初开始,自己便下决心要写一个vue系列的博客,但时至今日,才写系列的第三篇博客,想来甚是惭愧. 但是慢归慢,每一篇都要保证质量,以及要写出自己的心路历程,防止自己工作中填的坑再让读者走一 ...

  6. Vue系列（三）：组件及数据传递、路由、单文件组件、vue-cli脚手架

    上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...

  7. Vue系列：在vux的popup组件中使用百度地图遇到显示不全的问题

    问题描述: 将百度地图封装成一个独立的组件BMapComponent,具体见 Vue系列:如何将百度地图包装成Vue的组件(http://www.cnblogs.com/strinkbug/p/576 ...

  8. vue 2.0 路由切换以及组件缓存源代码重点难点分析

    摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...

  9. vue动态组件切换（选项卡）

    vue的动态组件 <template :is='变量'></template> 可以通过改变变量,来改变template的替换内容.达到选项卡的功能 如果想要切换保持不重新创建 ...

随机推荐

  1. Delphi IdHTTP 设置cookie 和访问后读取Cookie 值

    procedure TForm1.btn1Click(Sender: TObject); var   IdHTTP: TIdHTTP;   mstrCookie: string;   Cookies ...

  2. 将DOS格式的shell脚本转为UNIX格式

    shell脚本是UNIX格式,在修改其中内容时,务必保持UNIX格式.UE编辑器打开时,会询问是否转为DOS格式,请点否.如果修改完成后,不能确认是否为DOS格式,可以使用UE文件菜单下的Conver ...

  3. 【PyQt5-Qt Designer】制作炫酷的启动界面+进度条

    QProgressBar 进度条+QSplashScreen 启动界面 知识点: 1.进度条 #将进度条的最大值.最小值设置为相同时,产生跑马灯效果 self.progressBar.setMinim ...

  4. 关系型数据库与NoSQL数据库的优劣

    当大家学习了一定的NoSQL知识以后,了解了现今许多NoSQL数据库(如HBase,MongoDB,Redis等)时,就会觉得关系型数据库可能已经跟不上时代的步伐.其实并不然,关系型数据库的性能绝对不 ...

  5. JavaScript学习（五）

  6. python 遇到的问题及解答

    1.使用pip安装python 模块 打开cmd 输入pip install *,如pip install numpy    等待安装(如下) C:\WINDOWS\System32>pip i ...

  7. 关于ios下字体描边的一个细节

    转载请注明,来自:http://blog.csdn.net/skyman_2001    CGContextSetTextDrawingMode(context, kCGTextStroke);    ...

  8. what's the python之python介绍

    其实这一篇文章的大部分都是啰嗦话,大部分在百度百科中都有详尽的叙述.既然决定学python了就要风雨兼程,你不用洞悉python到底是什么,你只要知道这是一门编程语言,跟Java.C++等语言一样都是 ...

  9. cxf简单例子

    cxf 这里介绍在web跟非web中的发布以及调用 准备条件: 1,导入cxf的相关jar包,以maven项目为例 pom的配置文件为 <project xmlns="http://m ...

  10. Python笔记:调用函数，带扩号和和不带括号的区别

    调用函数,如果带括号,那么是调用函数运行后的结果, 调用函数不带括号,调用的是函数本身 例如: def cun (a,b): return a+b print(cun) : 调用函数,打印的是函数 p ...