<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>动态组件与v-once指令</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!-- <component :is="type"></component> --> <!-- component vue自带的一个组件 --> <child-one v-if='type==="child-one"'></child-one> <child-two v-if='type==="child-two"'></child-two> <button @click='click'>改变</button> </div> <script> Vue.component('child-one',{ template: ` <div v-once> child-one </div> ` // 1、使用v-once 可以有效提高静态内容的展示效率，存放在内容中，马上调用显示隐藏 // 2、 不适用v-once ，也可以完成效果，但是 消耗新能【频繁的创建、销毁组件】不推荐使用 }); Vue.component('child-two',{ template: ` <div v-once> child-two </div> ` }) var app = new Vue({ el:'#app', data:{ type:'child-one' }, methods: { click:function(){ this.type=this.type==='child-one'?'child-two':'child-one' } }, }) </script> </body> </html>
17-动态组件与v-once指令【v-once指令】
猜你喜欢
转载自www.cnblogs.com/suni1024/p/11540286.html
今日推荐
周排行