Vue2.0 【第二季】第9节 Component 标签
Vue2.0 【第二季】第9节 Component 标签
第9节 Component 标签
component标签是Vue框架自定义的标签，它的用途就是可以动态绑定我们的组件，根据数据的不同更换不同的组件。
1、我们先在构造器外部定义三个不同的组件，分别是componentA,componentB和componentC
var componentA={
template:`<div style="color:red">I'm componentA.</div>`
}
var componentB={
template:`div style="color:green">I'm componentB.</div>`
}
var componentC={
template:`<div style="color:pink">I'm componentC.</div>`
}
2、我们在构造器的components选项里加入这三个组件
var app = new Vue({
el:'#app',
data:{
who:'componentA'
},
components:{
"componentA":componentA,
"componentB":componentB,
"componentC":componentC,
}
})
3、我们在html里插入component标签，并绑定who数据，根据who的值不同，调用不同的组件
<div id="app">
<component v-bind:is="who"></component>
</div>
这就是我们的组件标签的基本用法。我们提高一下，给页面加个按钮，每点一下更换一个组件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>component-4</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</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">I'm componentA.</div>`
}
var componentB={
template:`div style="color:green">I'm componentB.</div>`
}
var componentC={
template:`<div style="color:pink">I'm componentC.</div>`
}
var app = 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 【第二季】第9节 Component 标签的更多相关文章
- 【重点突破】—— Vue1.0到Vue2.0的变化
前言: 本文参考作者:_So_ 和 我是某慧 的博文,重点梳理Vue1.0升级到Vue2.0后在开发中要注意的不同,以做学习. 组件模板不再支持片段代码,必须有一个顶级元素包裹,例如: ...
- Vue2.0 【第二季】第8节 Component 父子组件关系
目录 Vue2.0 [第二季]第8节 Component 父子组件关系 第8节 Component 父子组件关系 一.构造器外部写局部注册组件 二.父子组件的嵌套 Vue2.0 [第二季]第8节 Co ...
- Vue2.0 【第二季】第7节 Component 组件 props 属性设置
目录 Vue2.0 [第二季]第7节 Component 组件 props 属性设置 第7节 Component 组件 props 属性设置 一.定义属性并获取属性值 二.属性中带' - '的处理方式 ...
- Vue2.0 【第二季】第6节 Component 初识组件
目录 Vue2.0 [第二季]第6节 Component 初识组件 第6节 Component 初识组件 一.全局化注册组件 二.局部注册组件局部 三.组件和指令的区别 Vue2.0 [第二季]第6节 ...
- Vue2.0 【第二季】第2节 Vue.extend构造器的延伸
目录 Vue2.0 [第二季]第2节 Vue.extend构造器的延伸 一.什么是Vue.extend 二.自定义无参数标签 三.挂载到普通标签上 Vue2.0 [第二季]第2节 Vue.extend ...
- Vue2.0 【第二季】第5节 Template制作模板
目录 Vue2.0 [第二季]第5节 Template制作模板 第5节 Template制作模板 一.直接写在选项里的模板 二.写在template标签里的模板 三.写在script标签里的模板 Vu ...
- Vue2.0 【第二季】第4节 Vue的生命周期（钩子函数）
目录 Vue2.0 [第二季]第4节 Vue的生命周期(钩子函数) 第4节 Vue的生命周期(钩子函数) Vue2.0 [第二季]第4节 Vue的生命周期(钩子函数) 第4节 Vue的生命周期(钩子函 ...
- Vue2.0 【第二季】第3节 Vue.set全局操作
目录 Vue2.0 [第二季]第3节 Vue.set全局操作 第3节:Vue.set全局操作 一.引用构造器外部数据 二.在外部改变数据的三种方法: 三.为什么要有Vue.set的存在? Vue2.0 ...
- Vue2.0 【第二季】第1节 Vue.directive自定义指令
目录 Vue2.0 [第二季]第1节 Vue.directive自定义指令 一.什么是全局API? 二. Vue.directive自定义指令 三.自定义指令中传递的三个参数 四.自定义指令的生命周期 ...
随机推荐
- Office Lens：口袋中的扫描仪
Lens:口袋中的扫描仪" title="Office Lens:口袋中的扫描仪"> 编者按:开会时,你是否觉得白板上天马行空的讨论记录誊抄起来费时费事又难以共享- ...
- [LC] 253. Meeting Rooms II
Given an array of meeting time intervals consisting of start and end times [[s1,e1],[s2,e2],...] (si ...
- [LC] 318. Maximum Product of Word Lengths
Given a string array words, find the maximum value of length(word[i]) * length(word[j]) where the tw ...
- 敏捷开发方法(一) Scrum
Scrum团队:由产品负责人.开发团队和Scrum Master组成. 是跨职能的自组织团队 自组织团队自己选择如何最好地完成工作,而不是由团队外的人指导 跨职能团队拥有完成工作所需要的全部技能,不需 ...
- ajax学习相关
choices参数 当存在某个字段的值只有有限的几个时,如性别(只有男.女),婚否(已婚.未婚)等,这种情况,我们可以用数字来代替这些中文字符,可以减轻数据库的负担,这时,就需要用到choices参数 ...
- AI在自动化测试领域的应用
阿里QA导读:最近一两年随着深入学习技术浪潮的诞生,智能化测试迎来了新的发展,而AI也会引领下一代测试的新航向.Testin云测CTO陈冠诚先生的分享让我们看到AI在移动自动化测试领域里面的创新机会点 ...
- 6487. 【GDOI2020模拟02.29】列强争霸war
题目描述 区间绝对众数 即出现次数>len/2下取整的数 对于区间[L,R]扫一遍,维护一个数x和出现次数s 当前数=x则s+1,否则s-1,若s已为0则把x设为当前数 若区间内存在绝对众数,那 ...
- NOI Online 赛前刷题计划
Day 1 模拟 链接:Day 1 模拟 题单:P1042 乒乓球 字符串 P1015 回文数 高精 + 进制 P1088 火星人 搜索 + 数论 P1604 B进制星球 高精 + 进制 D ...
- 《前端之路》--- 重温 Egg.js
目录 <前端之路>--- 重温 Egg.js 一.基础功能 > 日志系统包含了 四大层面的 日志对象, 分别是 App Logger.App CoreLogger.Context L ...
- 7-30 jmu-python-凯撒密码加密算法 (10 分)
编写一个凯撒密码加密程序,接收用户输入的文本和密钥k,对明文中的字母a-z和字母A-Z替换为其后第k个字母. 输入格式: 接收两行输入,第一行为待加密的明文,第二行为密钥k. 输出格式: 输出加密后的 ...