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 已经被弃用. 因为基于组件树结构的事件流方式实在是让人难 ...
随机推荐
- Pulse-code modulation
脉冲编码调制(Pulse Code Modulation,PCM),由A.里弗斯于1937年提出的,这一概念为数字通信奠定了基础,60年代它开始应用于市内电话网以扩充容量,使已有音频电缆的大部分芯线的 ...
- GET和POST 编码和乱码
1. 什么是URL编码. URL编码是一种浏览器用来打包表单输入的格式,浏览器从表单中获取所有的name和其对应的value,将他们以name/value编码方式作为URL的一部分或者分离的发送到服 ...
- leetcode 400 Add to List 400. Nth Digit
Find the nth digit of the infinite integer sequence 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, ... Note:n is ...
- HDU1074 Doing Homework —— 状压DP
题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=1074 Doing Homework Time Limit: 2000/1000 MS (J ...
- myeclipse 8.6安装SVN插件
方法二: 安装subclipse, SVN 插件 1.从官网下载site-1.6.9.zip文件,网址是:subclipse.tigris.org, 2.从中解压出features与plug ...
- IOS应用在iPhone5和iPhone5s上不能全屏显示，应用画面上下各有1条黑色的解决方案
设置启动图片就可以了: 添加启动图: 接着设置为启动图: 这样就ok了
- （转）Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound
http://blog.xmaoseo.com/glyphicons-halflings-regular-woff-font-404-notfound/ 今天查看网站的源代码,发现有个glyphico ...
- 比Android更深远的改变世界——谷歌开源人工智能系统TensorFlow文档中文版
OpenStack中国社区编者按:开源无处不在,特别在基础创新领域,未来系统软件都会是开源为主流:2015年11月9日,Google于开源了其第二代人工智能系统Tensorflow,如同6年前同样开源 ...
- Python2.7 Queue模块学习
前面了解了一下threading,发现一般都是和queue模块配合使用的,queue产生一个队列,队列模式有3种,针对这三种队列分别有三个构造函数: 1 FIFO队列先进先出:class Queue. ...
- ubuntu 怎么格式化U盘？（转载）
转自:http://3168247.blog.51cto.com/3158247/605654 图形的话装一个gparted,找那个/dev/sdb,右击选择格式化,最后点“应用”.命令行:原则是先卸 ...