vue 動態元件與 v-once 指令
阿新 • • 發佈：2018-12-10
實現一個功能，點選按鈕，實現兩個標籤的切換顯示隱藏：
程式碼一：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue v-once 指令</title> <script src="./vue.js"></script> <style> </style> </head> <body> <div id="root"> <child-one v-if="type === 'child-one'"></child-one> <child-two v-if="type === 'child-two'"></child-two> <button @click="handleBtnClick">切換</button> </div> <script> Vue.component('child-one', { template: '<div>child-one</div>' }) Vue.component('child-two', { template: '<div>child-two</div>' }) var app = new Vue({ el: " #root ", data: { type: 'child-one' }, methods: { handleBtnClick: function() { this.type = this.type === 'child-one' ? 'child-two' : 'child-one' } } }) </script> </body> </html>
程式碼二：可以改成用動態元件<component :is="type"></component>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue v-once 指令</title> <script src="./vue.js"></script> <style> </style> </head> <body> <div id="root"> <component :is="type"></component> <button @click="handleBtnClick">切換</button> </div> <script> Vue.component('child-one', { template: '<div>child-one</div>' }) Vue.component('child-two', { template: '<div>child-two</div>' }) var app = new Vue({ el: " #root ", data: { type: 'child-one' }, methods: { handleBtnClick: function() { this.type = this.type === 'child-one' ? 'child-two' : 'child-one' } } }) </script> </body> </html>
程式碼三、使用v-once
使用到快取，有效提高效能，不用頻繁銷燬元素。完整程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue v-once 指令</title> <script src="./vue.js"></script> <style> </style> </head> <body> <div id="root"> <component :is="type"></component> <button @click="handleBtnClick">切換</button> </div> <script> Vue.component('child-one', { template: '<div v-once>child-one</div>' }) Vue.component('child-two', { template: '<div v-once>child-two</div>' }) var app = new Vue({ el: " #root ", data: { type: 'child-one' }, methods: { handleBtnClick: function() { this.type = this.type === 'child-one' ? 'child-two' : 'child-one' } } }) </script> </body> </html>