vue学习笔记之动态组件和v-once指令简单示例
2020-03-19 12:07
736 查看
本文实例讲述了vue动态组件和v-once指令。分享给大家供大家参考,具体如下:
点击按钮时,自动切换两个组件
<component :is="type"></component>
,当点击按钮之后,会自动清除原来的组件,显示新的组件。
每一次切换,都需要销毁+创建
但是这样消耗有点大,所以我们在子组件中引用了v-once指令,这样可以将显示在页面中的组件存到内存中,不会完全销毁。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <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> <!-- <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>
运行结果:
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
希望本文所述对大家vue.js程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- Ionic学习笔记5_动态组件指令
- 深入理解Vue组件八——动态组件与v-once指令
- Vue学习笔记——指令和部分组件
- Vue--动态组件与v-once指令
- Vue 动态组件与 v-once 指令的实现_vue.js
- Vue 动态组件与 v-once 指令的实现
- ExtJS学习笔记三:简单组件
- JVM学习笔记——一个简单程序编译成字节码指令后的解释
- vue 学习笔记 part-4 ->v-on指令
- javascript学习笔记—简单的动态选择收件人/联系人
- angular2 学习笔记 ( Dynamic Component 动态组件)
- vue 学习笔记 part-2->指令v-for
- ios学习笔记——简单控件(动态指示标识、进度条)
- 动态网站开发技术学习2:VS 2010制作作第一个简单示例网站
- vue学习笔记(五)——指令
- 5.5.vue入门基础学习笔记-基础指令介绍(其他绑定指令v-text v-html v-once v-pre v-cloak)
- vue 学习笔记 part-6 - > 组件
- Vue 2.0学习笔记:Vue组件内容分发(slot)
- VUE 学习总结之简单的Rate评分组件
- Scala学习笔记:数组操作与简单算法示例