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