组件切换方式一

 <!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. xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at[转载]

    今天在添加友盟统计的podfile pod install报错了: bogon:Children songximing$ pod install /Library/Ruby/Gems//gems/co ...

  2. LeetCode 104 Maximum Depth of Binary Tree 解题报告

    题目要求 Given a binary tree, find its maximum depth. The maximum depth is the number of nodes along the ...

  3. PyQt5学习笔记----标准文件打开保存框QFileDialog

    单个文件打开 QFileDialog.getOpenFileName()多个文件打开 QFileDialog.getOpenFileNames() 文件夹选取     QFileDialog.getE ...

  4. Apache Spark支持三种分布式部署方式 standalone、spark on mesos和 spark on YARN区别

    链接地址: http://dongxicheng.org/framework-on-yarn/apache-spark-comparing-three-deploying-ways/ Spark On ...

  5. 【adaboost】周志华

  6. 对Python源码加密及反编译前后对比

    关于python的加密 目前软件开发商对 Python 加密时可能会有两种形式,一种是对python转成的exe进行 保护,另一种是直接对.py或者.pyc文件进行保护,下面将列举两种形式的保护流程. ...

  7. html-标签页

    <template> <div class="pos-frame"> <div class="pos h100"> < ...

  8. vue中$emit 和$on 和$set的用法

    1.$set的用法:给 student对象新增 age 属性 data () { return { student: { name:"里斯'} } } 直接给student赋值不会触发视图更 ...

  9. Spark代码中设置appName在client模式和cluster模式中不一样问题

    问题 Spark应用名在使用yarn-cluster模式提交时不生效,在使用yarn-client模式提交时生效,如图1所示,第一个应用是使用yarn-client模式提交的,正确显示我们代码里设置的 ...

  10. linux 执行远程linux上的shell脚本或者命令以及scp 上传文件到ftp--免密码登陆

    场景:在linux A 上执行Linux B上的shell脚本和命令 步骤1.设置ssh免登陆 1.SSH无密码登录 # 本地服务器执行(A机器):生成密钥对 ssh-keygen -t dsa -P ...