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)文章
這篇文章主要介紹了在vue里添加好看的lottie動畫效果的方法，在vue中引入lottie非常簡單,需要的朋友可以參考下2018-08-08
這篇文章主要介紹了vue部署包可配置后臺接口地址的相關(guān)知識，本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-03-03
市面上大多數(shù)關(guān)于Vue.js自定義指令的文章都在講語法,很少講實際的應(yīng)用場景和用例,下面這篇文章主要給大家介紹了關(guān)于vue自定義封裝指令以及實際使用的相關(guān)資料,需要的朋友可以參考下2022-01-01
ResizeObserver?loop?limit?exceeded報錯原因及解決方案
這篇文章主要給大家介紹了關(guān)于ResizeObserver?loop?limit?exceeded報錯原因及解決的相關(guān)資料,公司項目監(jiān)聽系統(tǒng)中發(fā)現(xiàn)一個高頻錯誤ResizeObserver loop limit exceeded,而瀏覽器的console中卻沒有提示,需要的朋友可以參考下2023-09-09
下面小編就為大家?guī)硪黄獀ue中實現(xiàn)滾動加載更多的示例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
vue element-ui實現(xiàn)input輸入框金額數(shù)字添加千分位
這篇文章主要介紹了vue element-ui實現(xiàn)input輸入框金額數(shù)字添加千分位,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-12
最近項目需要將原vue項目結(jié)合ts的使用進行改造，本文從安裝到vue組件編寫進行了說明，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
vue轉(zhuǎn)electron項目及解決使用fs報錯:Module?not?found:?Error:?Can&apo
這篇文章主要給大家介紹了關(guān)于vue轉(zhuǎn)electron項目及解決使用fs報錯:Module?not?found:?Error:?Can‘t?resolve?‘fs‘?in的相關(guān)資料,文中通過圖文以及實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
本篇文章主要介紹了使用 async-validator 編寫 Form 組件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了vue實現(xiàn)PC端分辨率適配操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08