vue前端開(kāi)發(fā)自學(xué)基礎(chǔ),動(dòng)態(tài)切換組件的顯示！這個(gè)是需要借助于，一個(gè)官方提供的標(biāo)簽，名字叫【Component】-[代碼demo:<component :is="ComponetShow"></component>]。
下面看看代碼詳情。
<template>
<h3>動(dòng)態(tài)切換組件的顯示</h3>
<!-- <ComA></ComA> -->
<component :is="ComponetShow"></component>
<button @click="changeShow">切換組件顯示</button>
</template>
<script>
import ComA from './components/ComA.vue';
import ComB from './components/ComB.vue';
export default{
data(){
return{
ComponetShow:"ComA"
}
},
components:{
ComA,
ComB
},
methods:{
changeShow(){
this.ComponetShow = this.ComponetShow == "ComA" ? "ComB":"ComA"
}
}
}
</script>以上是在app.vue里面寫(xiě)的，一個(gè)按鈕，綁定點(diǎn)擊事件，切換組件A，和組件B的顯示。里面很明顯，是調(diào)用了一個(gè)官方提供的標(biāo)簽啊。它有一個(gè)屬性叫【is】。這個(gè)可以綁定一個(gè)動(dòng)態(tài)值。
然后用函數(shù)就可以隨意的更改這個(gè)動(dòng)態(tài)值。默認(rèn)情況下，我們給他賦值了。是組件A的調(diào)用。
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-808805.html
如圖，點(diǎn)擊切換組件顯示按鈕后，從組件A，變成了組件B。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-808805.html
到了這里，關(guān)于vue前端開(kāi)發(fā)自學(xué)基礎(chǔ),動(dòng)態(tài)切換組件的顯示的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
