<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态组件与v-once指令</title> <script src="vue.js"></script> </head> <body> <div id="root"> <component :is="type">动态组件</component> <!--<child-one v-if="type === 'child-one'"></child-one>--> <!--<child-two v-if="type === 'child-two'"></child-two>--> <button @click="handlebtn">change</button> <p>v-once指令可以提高静态内容的展示效率</p> </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 vm=new Vue({ el:"#root", data:{ type:'chile-one' }, methods:{ handlebtn:function(){ this.type = (this.type ==='child-one'?'child-two':'child-one') } } }) </script> </body> </html>
动态组件与v-once指令
最新推荐文章于 2022-03-08 12:06:45 发布