溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹v-once指令怎么在vue中使用，內(nèi)容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
具體如下：
點擊按鈕時，自動切換兩個組件
<component :is="type"></component>，當點擊按鈕之后，會自動清除原來的組件，顯示新的組件。
每一次切換，都需要銷毀+創(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>
運行結果：
關于v-once指令怎么在vue中使用就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
