1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="../lib/bootstrap.css">
  9.     <script src="../lib/vue.js"></script>
  10.     <style>
  11.         .v-enter,.v-leave-to{
  12.             opacity: 0;
  13.             transform: translateY(50px);
  14.         }
  15.         .v-enter-active,.v-leave-active{
  16.             transition: all 0.5s ease;
  17.         }
  18.         /* vue动画的style */
  19.     </style>
  20. </head>
  21. <body>
  22.     <div class="app">
  23.         <a href="#" @click.prevent="comName='mycom1'">登录</a>
  24.         <a href="#" @click.prevent="comName='mycom2'">注册</a>
  25.         <a href="#" @click.prevent="comName='mycom3'">退出</a>
  26.         <!-- <mycom1 v-if="flag"></mycom1>
  27.         <mycom2 v-else="flag"></mycom2> -->
  28.         <transition mode="out-in">      <!-- //mode定义了切换动画的顺序为先出后进，还有in-out -->
  29.             <component :is="comName"></component>
  30.         </transition>
  31.         <!-- component是一个占位符，‘：is’用来指定要展示组件的名称 -->
  32.         <!-- transition包含的区域为要进行切换的多组件 -->
  33.     </div>
  34.     <template id="cmp1">
  35.         <div>
  36.             <h1>我是组件一</h1>
  37.         </div>
  38.     </template>
  39.     <!-- 定义组件结构 -->
  40.     <template id="cmp2">
  41.         <div>
  42.             <h1>俺是组件2222哟</h1>
  43.         </div>
  44.     </template>
  45.     <template id="cmp3">
  46.         <div>
  47.             <h1>我退出啦</h1>
  48.         </div>
  49.     </template>
  50.     <script>
  51.         Vue.component('mycom1',{
  52.             template:'#cmp1'
  53.         })
  54.         //注册组件名称
  55.         Vue.component('mycom2',{
  56.             template:'#cmp2'
  57.         })
  58.         Vue.component('mycom3',{
  59.             template:'#cmp3'
  60.         })
  61.         var vm = new Vue({
  62.             el:'.app',
  63.             data:{
  64.                 flag:true,
  65.                 comName:'mycom1'
  66.             }
  67.         })
  68.     </script>
  69. </body>
  70. </html>

vue.js（17）--vue的组件切换的更多相关文章

  1. Vue.js起手式+Vue小作品实战

    本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...

  2. 学习Vue.js之vue移动端框架到底哪家强

    官网:https://cn.vuejs.org/. 转载:http://www.cnblogs.com/8899man/p/6514212.html Weex 2016年4月21日,阿里巴巴在Qcon ...

  3. js 引入Vue.js实现vue效果

    拆分组件为单个js见:https://www.jianshu.com/p/2f0335818ceb 效果 html <!DOCTYPE html> <html> <hea ...

  4. Vue.js 2.x：组件的定义和注册（详细的图文教程）

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 什么是组件 组件: 组件的出现,就是为了拆分Vue实例的代码量的, ...

  5. Vue.js 相关知识（组件）

    1. 组件介绍 组件(component),vue.js最强大的功能之一 作用:封装可重用的代码,通常一个组件就是一个功能体,便于在多个地方都能调用该功能体 根组件:我们实例化的Vue对象就是一个组件 ...

  6. vue-core-video-player-基于vue.js的视频播放器组件

    一 介绍 一款基于 vue.js 的轻量级的视频播放器插件插件 个性化配置 i18n 服务端渲染 画中画模式 事件订阅 易于开发 移动端适配 1.1 官方文档 https://core-player. ...

  7. 基于Vue.js的表格分页组件

    有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋 ...

  8. Vue.js的表格分页组件

    转自:http://www.cnblogs.com/Leo_wl/p/5522299.html 有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更 ...

  9. 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多

    通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...

  10. vue.js中的全局组件和局部组件

    组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能. 组件的使用有三 ...

随机推荐

  1. 用 IDEA工具导入SVN项目。 步骤一：选择VCS

    Intellij IDEA是目前主流的IDE开发工具,工程项目导入也是必不可少的操作,本文讲述如何用 IDEA工具导入SVN项目. 步骤一:选择VCS 步骤二:打开SVN Repositories 在 ...

  2. [CF1082G]Petya and Graph：最小割

    分析 发这篇博客的目的就是要让你们知道博主到底有多菜. 类似于[NOI2006]最大获利.(明明就是一模一样好吧!) 不知道怎么了,半秒就想到用网络流,却没想出怎么建图. 连这么简单的题都没做出来,我 ...

  3. Java 静态初始化块等的执行顺序

    实例代码 package text; class Root { static{ System.out.println("Root的静态初始化块"); } { System.out. ...

  4. 解决：父类中的@NotNull无效以及@Notnull 验证list对象无效

    解决方法如图: controller层 vo.param层 父类验证注解要使用@NotEmpty 不能使用 @NotNull,否则验证无效的,反正笔者是没有成功过

  5. [BZOJ2822]:[AHOI2012]树屋阶梯（卡特兰数）

    题目传送门 题目描述 暑假期间,小龙报名了一个模拟野外生存作战训练班来锻炼体魄,训练的第一个晚上,教官就给他们出了个难题.由于地上露营湿气重,必须选择在高处的树屋露营.小龙分配的树屋建立在一颗高度为N ...

  6. mysq访问方式

    mysql -h10.81.32.196 -P5152 -Dns_map_data_new -uwangyuchuan_r -p3DLg15rhSsm0O7Nsselect uid,name from ...

  7. nodejs工作大全

    1.修改文件夹中图片的名称 var fs = require('fs');var fileDirectory = "F:\\zdw\\修改文件夹名称\\newFile";var n ...

  8. mui初级入门教程（七）— 基于native.js的文件系统管理功能实现

    文章来源:小青年原创发布时间:2016-08-01关键词:mui,nativejs,android转载需标注本文原始地址: http://zhaomenghuan.github.io... 前言 这段 ...

  9. 基于Anaconda安装Tensorflow 并实现在Spyder中的应用

    基于Anaconda安装Tensorflow 并实现在Spyder中的应用 Anaconda可隔离管理多个环境,互不影响.这里,在anaconda中安装最新的python3.6.5 版本. 一.安装 ...

  10. AMD - Learning JavaScript Design Patterns [Book] - O'Reilly

    AMD - Learning JavaScript Design Patterns [Book] - O'Reilly The overall goal for the Asynchronous Mo ...