组件切换方式一

 <!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. visual stodio 编译前后动作定制总结

    copy "$(TargetDir)$(TargetName).lib" ..\lib\deploy\$(TargetName).lib 编译完成后将一个.lib 文件拷贝到指定目 ...

  2. ms sql server读取xml文件存储过程-sp_xml_preparedocument

    最近要在存储过程中读取xml中节点的值,然后进行sql操作: 要使用到的系统存储过程如下:sp_xml_preparedocument create procedure [dbo].[pro_Test ...

  3. linux下tomcat启动没有日志，没有进程，没有报错，没有监听端口

    可以试试运行catalina.sh run,这个命令会让tomcat在终端打印日志.

  4. Appium环境配置(二)

    一.使用Eclipse直接创建案例工程 1.打开Eclipse,[File]-->[New]-->[Project] 2.选择[Java Project]-->[Next] 3.输入 ...

  5. HTML5 自定义属性

    先声明  HTML5的自定义属性浏览器支持性不太好   目前只有firefox6+和chrome浏览器支持 元素除了自带的属性外 另外也可以加自定义属性   不过需要在前面加上data- 下面举个例子 ...

  6. 前端用Json传输数据给后台，用postman测试

    postman发送json格式的post请求   在地址栏里输入请求url:http://127.0.0.1:8081/getmoney 选择“POST”方式, 在“headers”添加key:Con ...

  7. 计算机网络 0.初识Internet与TCP/IP协议

    互联网,即因特网,Internet.互联网是一个世界范围的计算机网络.连接了世界上无数的计算设备,这些计算设备为PC.基于Linux的工作站,serverservers等等. 这些设备依据其作用不同可 ...

  8. docker私有仓库搭建和资源限制

    Docker 私有仓库的搭建 docker 私有仓库默认只支持https协议的访问  不支持http协议 如果需要允许通过http协议访问 必须手动修改配置文件 docker官方默认提供的仓库  提供 ...

  9. OCP-第二节课.md

    第一. MQ(压队列)    PGA    share pool 三层结构 应用服务器--->中间件--->数据库 第二. TCP/IP 第三. 应用层:应用层.表示层.会话层 数据流层: ...

  10. 003-读书笔记-企业IT架构转型之道-阿里巴巴中台战略思想与架构实战-分布式服务框架的选择

    3.1.淘宝平台“服务化”历程 大约2007年,淘宝500人团队,维护一个war包,200多个功能模块. 1)项目团队协同成本高,业务响应越来越慢 2)应用复杂度超出人的认知负载. 3)错误难于隔离[ ...