vue學(xué)習(xí)筆記之動態(tài)組件和v-once指令簡單示例
更新時間：2020年02月29日 18:30:05 作者：Rachel~Liu
這篇文章主要介紹了vue學(xué)習(xí)筆記之動態(tài)組件和v-once指令,結(jié)合簡單實例形式詳細(xì)分析了vue.js動態(tài)組建點擊切換相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了vue動態(tài)組件和v-once指令。分享給大家供大家參考，具體如下：
點擊按鈕時，自動切換兩個組件
<component :is="type"></component>，當(dāng)點擊按鈕之后，會自動清除原來的組件，顯示新的組件。
每一次切換，都需要銷毀+創(chuàng)建
但是這樣消耗有點大，所以我們在子組件中引用了v-once指令，這樣可以將顯示在頁面中的組件存到內(nèi)存中，不會完全銷毀。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>動態(tài)組件和v-once指令</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<component :is="type"></component>
<!-- <child-one v-if="type === 'child-one'"></child-one>-->
<!-- <child-two v-if="type === 'child-two'"></child-two>-->
<button @click="handleBtnClick">change</button>
</div>
</body>
</html>
<script>
Vue.component('child-one', {
template: '<div v-once>child-one</div>'
})
Vue.component('child-two', {
template: '<div v-once>child-two</div>'
})
var vm = new Vue({
el: '#app',
data: {
type: 'child-one'
},
methods: {
handleBtnClick: function () {
this.type = (this.type === 'child-one' ? 'child-two' : 'child-one');
}
}
})
</script>
運行結(jié)果：
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
希望本文所述對大家vue.js程序設(shè)計有所幫助。
相關(guān)文章
本文主要介紹了python列表中刪除重復(fù)元素的三種方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-01-01
詳解Python?NumPy如何使用argsort方法進(jìn)行排序
NumPy提供了各種功能強(qiáng)大的數(shù)組操作方法,其中之一就是argsort方法,本文將詳細(xì)介紹argsort方法的使用,以及如何在實際項目中充分利用它進(jìn)行排序操作,希望對大家有所幫助2024-03-03
利用python和百度地圖API實現(xiàn)數(shù)據(jù)地圖標(biāo)注的方法
這篇文章主要介紹了利用python和百度地圖API實現(xiàn)數(shù)據(jù)地圖標(biāo)注的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Python 實現(xiàn)引用其他.py文件中的類和類的方法
下面小編就為大家分享一篇Python 實現(xiàn)引用其他.py文件中的類和類的方法，具有的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-04-04
壓縮和解壓縮是日常常用的操作，不管是windows上圖形界面的操作，還是linux上用命令來進(jìn)行壓縮解壓縮，總的而言都還是比較方便的，本文通過案例代碼講解了python3壓縮和解壓文件的方法，2023-02-02
詳解NumPy中的線性關(guān)系與數(shù)據(jù)修剪壓縮
本文將通過股票均線計算的案例來為大家講解一下NumPy中的線性關(guān)系以及數(shù)據(jù)修剪壓縮的實現(xiàn)，文中的示例代碼講解詳細(xì)，感興趣的可以了解一下2022-05-05
這篇文章主要為大家介紹了一個有趣的小案例——利用Python編寫個有趣的記仇本，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以嘗試一下2023-04-04
今天小編就為大家分享一篇python清除函數(shù)占用的內(nèi)存方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-06-06
這篇文章主要為大家詳細(xì)介紹了python實現(xiàn)FTP循環(huán)上傳文件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
在本篇文章里小編給大家分享了一篇關(guān)于python3處理word文檔實例分析內(nèi)容，有興趣的朋友們可以參考下。2020-12-12