vue學(xué)習(xí)筆記之動態(tài)組件和v-once指令簡單示例
更新時間：2020年02月29日 18:30:05 作者：Rachel~Liu
這篇文章主要介紹了vue學(xué)習(xí)筆記之動態(tài)組件和v-once指令,結(jié)合簡單實例形式詳細分析了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)文章
異常檢測提供了在數(shù)據(jù)中發(fā)現(xiàn)模式、偏差和異常的途徑，這些模式、偏差和異常不限于模型的標(biāo)準(zhǔn)行為。本文將用Python?Pycaret進行異常檢測，感興趣的可以了解一下2022-03-03
Python實現(xiàn)讀取.nc數(shù)據(jù)并提取指定時間與經(jīng)緯度維度對應(yīng)的變量數(shù)值
這篇文章主要為大家詳細介紹了如何使用Python語言的netCDF4庫實現(xiàn)讀取.nc格式的數(shù)據(jù)文件,并提取指定維（時間、經(jīng)度與緯度）下的變量數(shù)據(jù),需要的可以了解下2024-02-02
銀行卡識別是一個在金融、安全等領(lǐng)域具有重要應(yīng)用的問題,本文主要為大家介紹了如何使用Python和深度學(xué)習(xí)技術(shù)來實現(xiàn)銀行卡識別功能,需要的可以參考下2024-03-03
Django使用uwsgi部署時的配置以及django日志文件的處理方法
今天小編就為大家分享一篇Django使用uwsgi部署時的配置以及django日志文件的處理方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-08-08
PySpark是由Spark官方開發(fā)的Python語言第三方庫,Python開發(fā)者可以使用pip程序快速的安裝PySpark并像其它三方庫那樣直接使用,本文給大家介紹Python?PySpark案例實戰(zhàn),感興趣的朋友一起看看吧2023-09-09
在日常業(yè)務(wù)處理中，我們經(jīng)常會面臨將不同系統(tǒng)中的數(shù)據(jù)進行匹配和比對的情況，本文將介紹如何使用Python的Pandas庫來處理這個問題，需要的可以參考一下2023-07-07
Python實現(xiàn)向PPT中插入表格與圖片的方法詳解
這篇文章將帶大家學(xué)習(xí)一下如何在PPT中插入表格與圖片以及在表格中插入內(nèi)容，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2022-05-05
sklearn中的交叉驗證的實現(xiàn)(Cross-Validation)
這篇文章主要介紹了sklearn中的交叉驗證的實現(xiàn)(Cross-Validation)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
Python用requests-html爬取網(wǎng)頁的實現(xiàn)
本文主要介紹了Python用requests-html爬取網(wǎng)頁的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
Django項目中model的數(shù)據(jù)處理以及頁面交互方法
今天小編就為大家分享一篇Django項目中model的數(shù)據(jù)處理以及頁面交互方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-05-05