<body>
<div id="app">
<h2>{{msg}}</h2>
<!--根据值的不同 ，显示不同的组件-->
<component v-bind:is="componentA"></component>
<component :is="componentB"></component>
<component :is="componentC"></component>
<hr>
<component v-bind:is="toggleComponent"></component>
<button @click="toggle"> 切换component组件 </button>
</div>
<script>
// 在外部声明组件
let componentA = {
template:`<h2 style="color: orangered">组件A</h2>`
}
let componentB = {
template:`<h2 style="color: yellowgreen">组件B</h2>`
}
let componentC = {
template:`<h2 style="color: skyblue">组件C</h2>`
}
new Vue({
el:'#app',
data:{
msg:'component标签',
componentA:componentA,
componentB,
componentC,
toggleComponent:componentA,
arr:[
componentA,
componentB,
componentC,
]
},
components:{
componentA:componentA,
componentB,
componentC
},
methods:{
toggle(){
this.toggleComponent =this.arr[Math.floor(Math.random()*3)]
}
}
})
</script>
</body>
根据值的不同 ，显示不同的组件
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 我们的组件有时候需要根据property的值来呈现不同效果。例如当isActive是true的时候，使用activ...
