vue.js 動態(tà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)
當(dāng)在做后臺管理系統(tǒng)的時候,會用到用戶的狀態(tài)管理這個功能,本文主要介紹了element多選表格中使用Switch開關(guān)的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07vue.js實現(xiàn)的經(jīng)典計算器/科學(xué)計算器功能示例
這篇文章主要介紹了vue.js實現(xiàn)的經(jīng)典計算器/科學(xué)計算器功能,具有基本四則運算計算器以及科學(xué)計算器的功能,可實現(xiàn)開方、乘方、三角函數(shù)以及公式運算等功能,需要的朋友可以參考下2018-07-07Vue?報錯-4058?ENOENT:no?such?file?or?directory的原因及解決方法
Vue?報錯-4058?ENOENT:?no?such?file?or?directory的原因和解決辦法,關(guān)于為什么為會報這個錯誤,按照字面意思的理解就是沒有找到這個文件或這個路徑,說明是路徑不對,本文給大家分享解決方案,感興趣的朋友一起看看吧2023-10-10vue2.0+ 從插件開發(fā)到npm發(fā)布的示例代碼
這篇文章主要介紹了vue2.0+ 從插件開發(fā)到npm發(fā)布的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-04-04