组件切换方式一

 <!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. 一种比较简单的实现ping的方式

    <span style="font-family: Arial, Helvetica, sans-serif;">头文件</span> <span s ...

  2. easyui中多级表头，主表头不能添加field字段，否则不居中

    <th field="" width="120" align="center" align="center" co ...

  3. Aop的基本介绍

    基本概念 通知  就是你想要的功能,也就是我们常说的安全.事物.日志等.先定义好这些,然后再想用的地方用一下.包含Aspect的一段处理代码 注意:其实这些功能(通知)并不是我们业务逻辑所必须的,只是 ...

  4. 数据重组：对一堆相似字典进行分类统计(shidebin)

    数据重组 # 需求说明:将data_source分类统计,并输出为如下data_final的形式: # data_final ===> # { # 'area': [{'place': '南山区 ...

  5. [MySQL优化1]centos中MySQL列出所有表

    步骤1 - 连接到MySQL数据库服务器:[root@host]# mysql -u root -pEnter password:******提示登陆成功Welcome to the MySQL mo ...

  6. android常用函数

    package com.cqytjr.util; import java.io.File; import java.net.InetAddress; import java.net.NetworkIn ...

  7. 20180824 SSRS Line Chart 绘制

    (很多时候我都会只记录遇到的问题点,很少详细的写整个过程) 1. 安装ReportBulider 客户端,不需要填写server url ,可以先放空,后面再维护. 安装包官网可以下载,是免费的,现在 ...

  8. 20180322 对DataTable里面的数据进行去重

    对DataTable里面的数据进行去重 DataTable dt = new DataTable(); dt.Columns.Add("Id", typeof(int)); dt. ...

  9. swiper 视频轮番

    百度搜索:swiper 视频轮番 转载1:https://blog.csdn.net/Aimee1608/article/details/79637929 项目中使用swiper插件嵌套video标签 ...

  10. Java通过POI读取Excel

    package com.hd.all.test.testjava; import java.io.File; import java.io.FileInputStream; import java.i ...