组件标签是Vue框架自定义的标签，它的用途就是可以动态绑定我们的组件，根据数据的不同更换不同的组件。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script type="text/javascript" src="../vue2.2.js"></script>

    <title>component-4</title>

</head>

<body>

    <h1>component-4</h1>

    <hr>

    <div id="app">

       <component v-bind:is="who"></component>

       <button @click="changeComponent">changeComponent</button>

    </div>

    <script type="text/javascript">

        var componentA={

            template:`<div style="color:red;">this componentA</div>`

        }

        var componentB={

            template:`<div style="color:green;">thiscomponentB</div>`

        }

        var componentC={

            template:`<div style="color:pink;">this componentC</div>`

        }

        var vm=new Vue({

            el:'#app',

            data:{

                who:'componentA'

            },

            components:{

                "componentA":componentA,

                "componentB":componentB,

                "componentC":componentC,

            },

            methods:{

                changeComponent:function(){

                    if(this.who=='componentA'){

                        this.who='componentB';

                    }else if(this.who=='componentB'){

                        this.who='componentC';

                    }else{

                        this.who='componentA';

                    }

                }

            }

        })

    </script>

</body>

</html>

vue2.0 动态切换组件的更多相关文章

  1. vue2.0动态添加组件

    方法一.<template> <input type="text" v-model='componentName'> <button @click=' ...

  2. 基于vue2.0的分页组件开发

    今天安排的任务是写基于vue2.0的分页组件,好吧,我一开始是觉得超级简单的,但是越写越写不出来,写的最后乱七八糟的都不知道下句该写什么了,所以重新捋了思路,小结一下- 首先写组件需要考虑: 要从父组 ...

  3. Vue2.0的通用组件

    饿了么基于Vue2.0的通用组件开发之路(分享会记录)   Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库. ...

  4. vue2.0实现分页组件

    最近使用vue2.0重构项目, 需要实现一个分页的表格, 没有找到合适的组件, 就自己写了一个, 效果如下: 该项目是使用 vue-cli搭建的, 如果你的项目中没有使用webpack,请根据代码自己 ...

  5. 第八十七篇：Vue动态切换组件的展示和隐藏

    好家伙, 1.什么是动态组件? 动态组件指的是动态切换组件的限制与隐藏 2.如何实现动态组件渲染 vue提供了一个内置的<component>组件,专门用来实现动态组件的渲染. 可以将其看 ...

  6. 饿了么基于Vue2.0的通用组件开发之路（分享会记录）

    Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库.今天我们要分享的就是开发 Element 的一些心得. 官网 ...

  7. vue2.0 如何自定义组件（vue组件的封装）

    一.前言 之前的博客聊过 vue2.0和react的技术选型:聊过vue的axios封装和vuex使用.今天简单聊聊 vue 组件的封装. vue 的ui框架现在是很多的,但是鉴于移动设备的复杂性,兼 ...

  8. 用webpack2.0构建vue2.0单文件组件超级详细精简实例

    npm init -y 初始化项目  //-y 为自动生成package.json,如果需要自行配置,去掉-y即可 安装各种依赖项 npm install --save vue 安装vue2.0 np ...

  9. vue2.0 $emit $on组件通信

    在vue1.0中父子组件通信使用$dispatch 和 $broadcast,但是在vue2.0中$dispatch 和 $broadcast 已经被弃用. 因为基于组件树结构的事件流方式实在是让人难 ...

随机推荐

  1. python itertools

    1 product 1.1 一个generator函数 因此它的返回值是一个iterator,可以用for遍历. 1.2 计算product的参数分类 1.2.1 dict和list 只用了dict的 ...

  2. debian repository的成长过程

    1 基本概念 1.1 健康的安装 在端系统中的一次健康的安装指的是,在安装的包的集合中,所有的依赖都满足,并且没有冲突存在. 这的健康的安装是相对于端系统而言的,并不是相对于整个repo而言的.对整个 ...

  3. mysql11---主键普通全文索引

    .1主键索引添加 当一张表,把某个列设为主键的时候,则该列就是主键索引 create table aaa (id int unsigned primary key auto_increment , n ...

  4. Buildroot构建指南--快速上手与实用技巧【转】

    本文转载自:http://blog.csdn.net/zhou_chenz/article/details/52335634 Buildroot官方全英文使用手册的链接是https://buildro ...

  5. YTU 2838: 改错题AB-装置连接

    2838: 改错题AB-装置连接 时间限制: 1 Sec  内存限制: 128 MB 提交: 81  解决: 49 题目描述 注:本题只需要提交标记为修改部分之间的代码,请按照C++方式提交. 有AB ...

  6. 专用于ASP.Net Web应用程序的日期控件

     原文引入:http://blog.csdn.net/nileel/article/details/1566051 专用于ASP.Net Web应用程序的日期控件 分类: ASP.NET/C#2007 ...

  7. 【转】浏览器中输入url后发生了什么

    原文地址:http://www.jianshu.com/p/c1dfc6caa520 在学习前端的过程中经常看到这样一个问题:当你在浏览器中输入url后发生了什么?下面是个人学习过程中的总结,供个人复 ...

  8. hdu 2553（N皇后问题）

    N皇后问题 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  9. Windows NT/NTLM 加密

    Hash,一般翻译为“散列”,也有直接音译为“哈希”的,就是把任意长度的输入(又叫做预映射,pre-image),通过散列算法,变换成固定长度的输出,该输出就是散列值.这种转换是一种压缩映射,也就是散 ...

  10. 重启fpm

    ps aux | grep php-fpm cat /etc/php-fpm.conf kill -USR2 `cat /run/php-fpm/php-fpm.pid