vue学习笔记之动态组件和v-once指令简单示例
本文实例讲述了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程序设计有所帮助。
相关文章：
1. ThinkPHP5 通过ajax插入图片并实时显示(完整代码)2. ASP.NET MVC通过勾选checkbox更改select的内容3. Android实现图片自动切换功能(实例代码详解)4. jsp+mysql实现网页的分页查询5. javascript xml xsl取值及数据修改第1/2页6. 存储于xml中需要的HTML转义代码7. 使用AJAX（包含正则表达式）验证用户登录的步骤8. 解决Python paramiko 模块远程执行ssh 命令 nohup 不生效的问题9. JavaScript Tab菜单实现过程解析10. Python使用oslo.vmware管理ESXI虚拟机的示例参考
网公网安备