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 已经被弃用. 因为基于组件树结构的事件流方式实在是让人难 ...
随机推荐
- SprigMVC基础测试
创建POJO package org.entity; public class User { private int id; private String userName; private Stri ...
- spring 简述
Spring的发展 1.1. Spring1.x 时代 在Spring1.x时代,都是通过xml文件配置bean,随着项目的不断扩大,需要将xml配置分放到不同的配置文件中,需要频繁的在java类和x ...
- 安装APK报错解决方法【转】
本文转载自:http://blog.csdn.net/zy1235678/article/details/38122827 adb install xxx.apk 报错,安装APK报错:INSTALL ...
- javascript来实现详细时间提醒信息效果
我们经常在社交网络上面看到很人性化的时间提示比如,你的朋友几分钟前更新了什么,你的朋友几天前更新了什么信息. 这些小tips比直接显示某年某月人性化很多.我们可以用不同的程序实现这种效果.中国音效网下 ...
- html5--7-33 阶段练习5
html5--7-33 阶段练习5 总结: 1.JS中可以递归函数 2.js中数组对象array的使用 学习要点 综合运用学过的知识完成三个综合小练习,巩固学过的知识. 阶段小练习5-1:使用递归算法 ...
- c#截图工具
厚积薄发,丰富的公用类库积累,助你高效进行系统开发(6)----全屏截图.图标获取.图片打印.页面预览截屏.图片复杂操作等 俗话说,一个好汉十个帮,众人拾柴火焰高等都说明一个道理,有更多的资源,更丰富 ...
- VS2013插件开发
一.功能描述 项目中有一个AppSettings.xml文件,当这个文件有添加新元素的时候,将该添加的内容自动同步到其他目录下的AppSettings.xml文件. 二.插件模板选择 要开发VS插件需 ...
- appium学习【二】：用try捕获异常后，用例的执行结果为pass
在代码中用try..except捕获异常截图后,HTMLTestRunner生成的测试报告中,用例的执行结果为pass 解决办法为: 在try..except后加raise,只要再加个raise就行了 ...
- bzoj 1089: [SCOI2003]严格n元树【dp+高精】
设f[i]为深度为i的n元树数目,s为f的前缀和 s[i]=s[i-1]^n+1,就是增加一个根,然后在下面挂n个子树,每个子树都有s[i-1]种 写个高精就行了,好久没写WA了好几次-- #incl ...
- P4475 巧克力王国（KDTree）
传送门 首先可以把约束条件看成一条直线,然后每个巧克力看成一个点,求给定区域内的点权和 用KDTree,每次判断一下当前矩形是否整个都在里面或都在外面,是的话直接返回,否则的话递归 注意,必须该矩形四 ...