vue.js 動態(tài)組件詳解
更新時(shí)間：2021年09月14日 09:57:53 作者：貓老板的豆
這篇文章主要介紹了vue.js 動態(tài)組件詳解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
:is 動態(tài)組件
使用 v-bind:is=”組件名”，會自動去找匹配的組件名，如果沒有，則不顯示；
<div id="app">
<test v-bind:is="which_to_show"></test>
</div>
<script>
var demo = new Vue({
el: "#app",
data: {
which_to_show: "first"
},
components: {
first: {
template: "<div>這里是子組件first</div>"
},
second: {
template: "<div>這里是子組件second</div>"
},
third: {
template: "<div>這里是子組件third</div>"
}
}
});
</script>
通過改變 which_to_show 的值就可以動態(tài)改變想要加載渲染的組件,如下：
到此這篇關(guān)于vue.js 動態(tài)組件詳解的文章就介紹到這了,更多相關(guān)vue.js 動態(tài)組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
element多選表格中使用Switch開關(guān)的實(shí)現(xiàn)
當(dāng)在做后臺管理系統(tǒng)的時(shí)候，會用到用戶的狀態(tài)管理這個(gè)功能，本文主要介紹了element多選表格中使用Switch開關(guān)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要介紹了vue+element樹形選擇器組件封裝和使用方式，具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2020-04-04
element ui表格實(shí)現(xiàn)下拉篩選功能
這篇文章主要為大家詳細(xì)介紹了element ui表格實(shí)現(xiàn)下拉篩選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
在我們開發(fā)項(xiàng)目中,特別是流程審批類的項(xiàng)目,最后一步會提交審核,審核員看完相應(yīng)信息以后,沒問題就會簽字通過審批,這篇文章主要給大家介紹了關(guān)于VUE簽字組件vue-esign安裝使用的相關(guān)資料,需要的朋友可以參考下2023-09-09
本篇文章給大家詳細(xì)介紹了vue跨域處理問題的方式以及相關(guān)知識點(diǎn)介紹，對此有興趣的朋友學(xué)習(xí)下。2018-02-02
vue.js實(shí)現(xiàn)的經(jīng)典計(jì)算器/科學(xué)計(jì)算器功能示例
這篇文章主要介紹了vue.js實(shí)現(xiàn)的經(jīng)典計(jì)算器/科學(xué)計(jì)算器功能,具有基本四則運(yùn)算計(jì)算器以及科學(xué)計(jì)算器的功能,可實(shí)現(xiàn)開方、乘方、三角函數(shù)以及公式運(yùn)算等功能,需要的朋友可以參考下2018-07-07
Vue?報(bào)錯(cuò)-4058?ENOENT:no?such?file?or?directory的原因及解決方法
Vue?報(bào)錯(cuò)-4058?ENOENT:?no?such?file?or?directory的原因和解決辦法,關(guān)于為什么為會報(bào)這個(gè)錯(cuò)誤,按照字面意思的理解就是沒有找到這個(gè)文件或這個(gè)路徑,說明是路徑不對,本文給大家分享解決方案,感興趣的朋友一起看看吧2023-10-10
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)時(shí)間軸效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了Vue-Router-添加全局$router屬性,在 Vue 中有一個(gè) mixin 方法，這個(gè)方法會在每個(gè)組件創(chuàng)建之前被調(diào)用，我們可以在這個(gè)方法中將 VueRouter 實(shí)例掛載到 Vue 實(shí)例上，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-11-11
vue2.0+ 從插件開發(fā)到npm發(fā)布的示例代碼
這篇文章主要介紹了vue2.0+ 從插件開發(fā)到npm發(fā)布的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04