Class14 - Vue v-bind:is 组件切换绑定
作者:©Mrlin(史密斯林)
简介:学习记录,用于记录在CSDN课程中的学习内容。
课程:Vue2.x从入门到实战。Vue.js Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动.(来自官方介绍)
Vue组件切换绑定
首先,定义三个组件btna
,btnb
,btnc
:1
2
3
4
5
6
7
8
9
10var btna = {
template:`<div>我是组件A</div>`
}
var btnb = {
template:`<div>我是组件B</div>`
}
var btnc = {
template:`<div>我是组件C</div>`
}
点击A
,B
,C
三个按钮时,切换对应的A
,B
,C
组件
1 | <button @click="isBtn(A)">A</button> |
通过绑定的which
属性,切换component
定义isBtn
方法1
2
3
4
5isBtn(btn) {
if (btn == "A") { this.which = "btna" }
if (btn == "B") { this.which = "btnb" }
if (btn == "C") { this.which = "btnc" }
}
源码
1 |
|