<div> <button @click="change">切换页面</button> <keep-alive include="home,archive"> <component :is="currentView"></component> </keep-alive> </div> <script src="https://unpkg.com/vue"></script> <script> new Vue({ el: '#example', data:{ index:0, arr:[ {name:'home',template:`<div>我是主页</div>`}, {name:'posts',template:`<div>我是提交页</div>`}, {name:'archive',template:`<div>我是存档页</div>`} ], }, computed:{ currentView(){ return this.arr[this.index]; } }, methods:{ change(){ var len = this.arr.length; this.index = (++this.index)% len; }, } }) </script>
总结
以上所述是小编给大家介绍的Vue动态组件实例解析，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
您可能感兴趣的文章: