vue2.0 动态切换组件
组件标签是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 动态切换组件的更多相关文章
- vue2.0动态添加组件
方法一.<template> <input type="text" v-model='componentName'> <button @click=' ...
- 基于vue2.0的分页组件开发
今天安排的任务是写基于vue2.0的分页组件,好吧,我一开始是觉得超级简单的,但是越写越写不出来,写的最后乱七八糟的都不知道下句该写什么了,所以重新捋了思路,小结一下- 首先写组件需要考虑: 要从父组 ...
- Vue2.0的通用组件
饿了么基于Vue2.0的通用组件开发之路(分享会记录) Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库. ...
- vue2.0实现分页组件
最近使用vue2.0重构项目, 需要实现一个分页的表格, 没有找到合适的组件, 就自己写了一个, 效果如下: 该项目是使用 vue-cli搭建的, 如果你的项目中没有使用webpack,请根据代码自己 ...
- 第八十七篇：Vue动态切换组件的展示和隐藏
好家伙, 1.什么是动态组件? 动态组件指的是动态切换组件的限制与隐藏 2.如何实现动态组件渲染 vue提供了一个内置的<component>组件,专门用来实现动态组件的渲染. 可以将其看 ...
- 饿了么基于Vue2.0的通用组件开发之路（分享会记录）
Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库.今天我们要分享的就是开发 Element 的一些心得. 官网 ...
- vue2.0 如何自定义组件（vue组件的封装）
一.前言 之前的博客聊过 vue2.0和react的技术选型:聊过vue的axios封装和vuex使用.今天简单聊聊 vue 组件的封装. vue 的ui框架现在是很多的,但是鉴于移动设备的复杂性,兼 ...
- 用webpack2.0构建vue2.0单文件组件超级详细精简实例
npm init -y 初始化项目 //-y 为自动生成package.json,如果需要自行配置,去掉-y即可 安装各种依赖项 npm install --save vue 安装vue2.0 np ...
- vue2.0 $emit $on组件通信
在vue1.0中父子组件通信使用$dispatch 和 $broadcast,但是在vue2.0中$dispatch 和 $broadcast 已经被弃用. 因为基于组件树结构的事件流方式实在是让人难 ...
随机推荐
- Spring如何实现IOC和AOP的，说出实现原理。
用过spring的朋友都知道spring的强大和高深,都觉得深不可测,其实当你真正花些时间读一读源码就知道它的一些技术实现其实是建立在一些最基本的技术之上而已:例如AOP(面向方面编程)的实现是建立在 ...
- ibatis和mybatis的区别
区别1:全局配置文件(sqlMapConfig.xml)的差异 主要是元素标签命名的差异,比如mybatis的根元素标签为<configuration>,ibatis的 根元素标签为< ...
- maven工具使用
一.工具安装: 所需工具 : JDK 1.8Maven 3.3.3 1.安装JDK 和 JAVA_HOME 2.添加 M2_HOME 和 MAVEN_HOME 3.添加到环境变量 - PATH 4.验 ...
- caioj1275&&hdu4035: 概率期望值6：迷宫
期望的大难题,%%ZZZ大佬的解释,不得不说这是一道好题(然而膜题解都没完全看懂,然后就去烦ZZZ大佬) 简单补充几句吧,tmp的理解是个难点,除以tmp的原因是,当我们化简时,子节点也有一个B*f[ ...
- YTU 2983: 小明的生机！
2983: 小明的生机! 时间限制: 1 Sec 内存限制: 128 MB 提交: 16 解决: 2 题目描述 小明陷入一个充满陷阱的密道之中,现在他要逃脱这里!到达密道的指定位置即可离开这处绝境 ...
- Ubuntu Nginx uwsgi django 初试
/************************************************************************************** * Ubuntu Ngi ...
- 【基于libRTMP的流媒体直播之 AAC、H264 推送】
这段时间在捣腾基于 RTMP 协议的流媒体直播框架,其间参考了众多博主的文章,剩下一些细节问题自行琢磨也算摸索出个门道,现将自己认为比较恼人的 AAC 音频帧的推送和解析.H264 码流的推送和解析以 ...
- UI：数据的解析
在懒加载的时候要注意事项: 必须使用 self.XX 的样式去开辟空间,不能使用 _XX 的格式去开辟,因为前者是内部的 set 方法,而后者并不走内部的 set 方法. json 文件的创建 xm ...
- UI：用UITableView制作通讯录的关键代码
分析{功能分析(打电话.添加联系人.修改联系人),模块分析(联系人展示.详情模块.添加模块)} 拿到一个项目,首先分析项目框架(工程框架) 首先:判断是否是用户第一次安装:(如果是的,那就加载用户引导 ...
- Python.h：No such file or directory
出现No such file or directory的错误,有两种情况,一种是真的没有Python.h这个文件,一种是Python的版本不对, 可以进入/usr/include/文件夹下的Pytho ...