<!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>

    <link rel="stylesheet" href="../lib/bootstrap.css">

    <script src="../lib/vue.js"></script>

    <style>

        .v-enter,.v-leave-to{

            opacity: 0;

            transform: translateY(50px);

        }

        .v-enter-active,.v-leave-active{

            transition: all 0.5s ease;

        }

        /* vue动画的style */

    </style>

</head>

<body>

    <div class="app">

        <a href="#" @click.prevent="comName='mycom1'">登录</a>

        <a href="#" @click.prevent="comName='mycom2'">注册</a>

        <a href="#" @click.prevent="comName='mycom3'">退出</a>

        <!-- <mycom1 v-if="flag"></mycom1>

        <mycom2 v-else="flag"></mycom2> -->

        <transition mode="out-in">      <!-- //mode定义了切换动画的顺序为先出后进，还有in-out -->

            <component :is="comName"></component>

        </transition>

        <!-- component是一个占位符，‘：is’用来指定要展示组件的名称 -->

        <!-- transition包含的区域为要进行切换的多组件 -->

    </div>

    <template id="cmp1">

        <div>

            <h1>我是组件一</h1>

        </div>

    </template>

    <!-- 定义组件结构 -->

    <template id="cmp2">

        <div>

            <h1>俺是组件2222哟</h1>

        </div>

    </template>

    <template id="cmp3">

        <div>

            <h1>我退出啦</h1>

        </div>

    </template>

    <script>

        Vue.component('mycom1',{

            template:'#cmp1'

        })

        //注册组件名称

        Vue.component('mycom2',{

            template:'#cmp2'

        })

        Vue.component('mycom3',{

            template:'#cmp3'

        })

        var vm = new Vue({

            el:'.app',

            data:{

                flag:true,

                comName:'mycom1'

            }

        })

    </script>

</body>

</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. Bugku web web2

    web2 打开后发现是个大滑稽啊!F12检查元素拿到flag

  2. [HG]AK 题解

    前言 什么鬼畜玩意,扶我起来,我要用__int128,这辈子都不珂能用龟速乘的... 真香. 题解 我们知道这个模数是个神奇的东西 \(2305843008676823040 = 2^{29} \ti ...

  3. SQL读取表中不重复字段

    通关关键字 distinct 将AlbumName字段中所以不重复的内容读出来.

  4. Java基础之方法详解

    方法的所属性 在Java的语言中,方法相当于C语言中的函数,但是它与传统的函数也有着明确的不同:在结构化的语言中,函数是一等公民,整个程序是由一个个函数组成的:但是在面向对象的语言里,类是一等公民,整 ...

  5. iOS开发自定义字体之静态字体

    最后更新 2017-04-25 在iOS开发中经常会用到字体, 一般字体文件比较小的,单一的,几十k, 可以通过内置进去;如果字体文件比较多或者字体文件比较大,通常通过动态加载方式. 静态加载方式 将 ...

  6. fengmiantu4

  7. SQL优化—nested loop优化

    跑批时间段22:00-23:00,生成AWR报告 分析sql:SQL_ID='5hfw4smzs2pqw' 执行计划: SQL> select *  FROM TABLE(DBMS_XPLAN. ...

  8. 【洛谷P4445 【AHOI2018初中组】报名签到】

    题目描述 n 位同学(编号从1 到n)同时来到体育馆报名签到,领取准考证和参赛资料.为了有序报名,这n 位同学需要按编号次序(编号为1 的同学站在最前面)从前往后排成一条直线.然而每一位同学都不喜欢拥 ...

  9. 安装U盘启动ferdora-22-fce笔记

    如何格式化为fat? windows图形界面格式化, 选项中没有fat, 只有fat32和exfat两种upan格式 Fat就是 传统的FAT16 要格式化为fat, 需要使用cmd的format命令 ...

  10. 如何吸引用户打开自己发送的EDM邮件

    一般来说,邮件发送到用户的收件箱,但用户不一定会阅读.因为每个用户收到的邮件都很多.那么,究竟应该如何吸引读者打开自己的EDM邮件呢? 只有当用户认识并信任发件人的时候,此时邮件的打开率是最高的,可以 ...