组件切换方式一

 <!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. spark Pair RDD 基础操作

    下面是Pair RDD的API讲解 转化操作 reduceByKey:合并具有相同键的值: groupByKey:对具有相同键的值进行分组: keys:返回一个仅包含键值的RDD: values:返回 ...

  2. delphi string.split 按照任意字符串分割语句

    delphi string.split 按照任意字符串分割语句 1.就是把一个指定的字符串用指定的分割符号分割成多个子串,放入一个 TStringList 中 function ExtractStri ...

  3. linux 源码安装 mono

    $ yum install bison gettext glib2 freetype fontconfig libpng libpng-devel libX11 libX11-devel glib2- ...

  4. tensorflow入门笔记（三） tf.GraphKeys

    tf.GraphKeys类存放了图集用到的标准名称. 该标准库使用各种已知的名称收集和检索图中相关的值.例如,tf.Optimizer子类在没有明确指定待优化变量的情况下默认优化被收集到tf.Grap ...

  5. 1、python同级目录及子目录模块引入

    2个模块在同一个包内时(即引入和被引入的2个py文件在同一个目录下),直接引入模块名 1.引入与被引入模块或包在同一目录下时,直接引入模块名或者包名import modulename.py或者impo ...

  6. IIS添加Expires头

    今天的Web页面包含大量组件,并且数量不断增长:页面的初访问者会进行很多HTTP请求,但通过使用一个长久的Expires头,使这些组件可以被缓存.这会在后续的页面浏览中避免不必要的HTTP请求.长久的 ...

  7. MySQL数据库改名的三种方法

    前不久去面试,被问到Innodb引擎的表如何改数据库名,当时我也只回答了MyISAM改如何操作,被一些细节问题打败,真是操蛋. 如果表示MyISAM那么可以直接去到数据库目录mv就可以. Innodb ...

  8. sql server 复制、镜像常见故障处理

    sql server2008数据库复制实现数据同步常见问题 操作使用的一些技巧(事务复制类型): 1.如何修改一个已经发布的表的属性? 将发布所有订阅删除,(发布不用删除),就可以在发布属性的项目中取 ...

  9. AsyncStorage和Promise配合使用

    代码: AsyncStorage封装 import {AsyncStorage} from "react-native"; class DeviceStorage { //保存数据 ...

  10. 使用DigitalOcean控制台访问Droplet（远程服务器）

    介绍 大多数用户将使用SSH,PUTTY或安装的控制面板管理他们的DigitalOcean Droplet. 但是,可能会出现阻止您使用这些方法访问Droplet的情况. 例如,更改网络或服务配置文件 ...