这里，我用一个注册登录两组件的切换实例来演示：

切换方式一

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8" />

    <title>独秀不爱秀</title>

</head>

<body>

    <div id="app">

        <a href="#" @click.prevent="flag = true">登录</a>

        <a href="#" @click.prevent="flag = false">注册</a>

        <!-- 默认显示 登录组件 -->

        <login v-if="flag"></login>

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

    </div>

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

    <script type="text/javascript">

        Vue.component('login', {

            template: '<h3>登录组件</h3>'

        });

        Vue.component('register', {

            template: '<h3>注册组件</h3>'

        });

        const vm = new Vue({

            el: '#app',

            data: {

                flag: true

            },

        });

    </script>

</body>

</html>

这个方式唯一的缺陷就是只能在两个组件之前切换，当要求需要三个及三个以上的组件切换的时候，这就不行了(原因是 flag 只有 true 和 false 两个值)，这就要要使用 方式二了。

切换方式二

这里，我们需要学到一个 Vue 官方 提供的 元素 component。

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8" />

    <title>独秀不爱秀</title>

</head>

<body>

    <div id="app">

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

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

        <!--

            Vue 提供的 component 来展示对应名称的组件

            component 是一个占位符

            :is 属性指定 组件名称

        -->

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

    </div>

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

    <script type="text/javascript">

        // 组件名称是字符串

        Vue.component('login', {

            template: '<h3>登录组件</h3>'

        });

        Vue.component('register', {

            template: '<h3>注册组件</h3>'

        });

        const vm = new Vue({

            el: '#app',

            data: {

                comName: 'login'// 当前 component 中的 :is 绑定的组件名称

            },

        });

    </script>

</body>

</html>

现在，我们在添加一个退出组件（这是为了证明第二种组件切换方式的好处）

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8" />

    <title>独秀不爱秀</title>

</head>

<body>

    <div id="app">

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

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

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

        <!--

            Vue 提供的 component 来展示对应名称的组件

            component 是一个占位符

            :is 属性指定 组件名称

        -->

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

    </div>

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

    <script type="text/javascript">

        // 组件名称是字符串

        Vue.component('login', {

            template: '<h3>登录组件</h3>'

        });

        Vue.component('register', {

            template: '<h3>注册组件</h3>'

        });

        Vue.component('out', {

            template: '<h3>退出组件</h3>'

        });

        const vm = new Vue({

            el: '#app',

            data: {

                // 默认显示 登录组件

                comName: 'login'// 当前 component 中的 :is 绑定的组件名称

            },

        });

    </script>

</body>

</html>

切换成功。

组件切换方式（Vue.js）的更多相关文章

  1. 第六章 组件 59 组件切换-使用Vue提供的component元素实现组件切换

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  2. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  3. VUE.JS组件化

    VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...

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

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

  5. Vue系列之 => 组件切换

    组件切换方式一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  6. Vue.js 组件编码规范

    本规范提供了一种统一的编码规范来编写 Vue.js 代码.这使得代码具有如下的特性: 其它开发者或是团队成员更容易阅读和理解. IDEs 更容易理解代码,从而提供高亮.格式化等辅助功能 更容易使用现有 ...

  7. Vue.js 学习笔记 第7章 组件详解

    本篇目录: 7.1 组件与复用 7.2 使用props传递数据 7.3 组件通讯 7.4 使用slot分发内容 7.5 组件高级用法 7.6 其他 7.7 实战:两个常用组件的开发 组件(Compon ...

  8. Vue.js——60分钟组件快速入门（上篇）

    组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HTML ...

  9. Vue.js：轻量高效的前端组件化方案

    转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014 ...

随机推荐

  1. python网页内容提取神器lxml

    一.Xpath是什么 XPath 是一门在 XML 文档中查找信息的语言.XPath 用于在 XML 文档中通过元素和属性进行导航. XPath 使用路径表达式在 XML 文档中进行导航 XPath ...

  2. 配置本地 yum 仓库

    配置本地 yum 仓库 # yum 官网 http://yum.baseurl.org/ # yum 手册页 man yum man yum.conf SEE ALSO pkcon (1) yum.c ...

  3. Oracle EBS 11i x86-64 的预安装

    1.EBS11i的软件组成,28个zip包 Oracle ApplicationsOracle Application with NLSOracle Database technology stack ...

  4. [PHP] Laravel 5.5 图片上传功能

    以Laravel 5.5 框架为主,进行文件上传功能的实现如下: 一.配置文件修改 打开 config/filesystems.php 文件在 ‘disks’ 数组中添加如下代码 //自定义 'upl ...

  5. selenium--浏览器滚动条操作

    前戏 在进行web自动化的时候,selenium只能找当前屏幕上的标签,如果标签在当前页面没显示下,需要拖动滚动条才能查看到这个元素,这时候就要操作浏览器的滚动条,让当前页面显示这个元素才可以操作,在 ...

  6. 【LG3322】[SDOI2015]排序

    [LG3322][SDOI2015]排序 题面 洛谷 题解 交换顺序显然不影响答案,所以每种本质不同的方案就给答案贡献次数的阶乘. 从小往大的交换每次至多\(4\)中决策,复杂度\(O(4^n)\). ...

  7. C语言博客作业04—数组

    0.展示PTA总分(0----2) 展示3张关于"数组题目集"分数截图. 1.本章学习总结(2分) 1.1 学习内容总结 整理数组这章学习主要知识点,必须包含内容有: (1)数组查 ...

  8. [BZOJ2186]沙拉公主的困惑

    [BZOJ2186]沙拉公主的困惑 题面 大富翁国因为通货膨胀,以及假钞泛滥,政府决定推出一项新的政策:现有钞票编号范围为1到N的阶乘,但是,政府只发行编号与M!互质的钞票.房地产第一大户沙拉公主决定 ...

  9. c# json序列化不包括某列

    .[Newtonsoft.Json.JsonIgnore]特性:使用Newtonsoft.Json序列化时字段不会被序列化. .[System.Web.Script.Serialization.Scr ...

  10. Windows安装gmpy2

    我在终端用python2的pip安装gmpy2时显示缺少Visual C++ 9.0 按照其要求,访问他给的网址安装一下 https://pypi.org/project/gmpy2/#files 进 ...