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程序设计有所帮助。
-
本文向大家介绍vue学习笔记之Vue中css动画原理简单示例，包括了vue学习笔记之Vue中css动画原理简单示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了Vue中css动画原理。分享给大家供大家参考，具体如下： 当transition包裹了一个元素之后，vue会自动分析元素的css样式，构建动画流程。 so，我们需要定义style。 vue中的css动画，其实就是某一个时间点，给元
-
本文向大家介绍vue学习笔记之v-if和v-show的区别，包括了vue学习笔记之v-if和v-show的区别的使用技巧和注意事项，需要的朋友参考一下 v-if vs v-show v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 相
-
本文向大家介绍AngularJS学习笔记之ng-options指令，包括了AngularJS学习笔记之ng-options指令的使用技巧和注意事项，需要的朋友参考一下 1.基本下拉效果(lable for value in array) 其中select标签中的ng-model属性必须有，其值为选中的对象或属性值。 2.自定义下拉显示名称(label for value in array)
-
本文向大家介绍Bootstrap简单表单显示学习笔记，包括了Bootstrap简单表单显示学习笔记的使用技巧和注意事项，需要的朋友参考一下 表单布局 垂直或基本表单 基本的表单结构时BootStrap自带的，创建基本表单的步骤如下： 1、向父<form>元素添加role = “form”； 2、为了获取最佳的间距，把标签和控件放在一个div.form-group中,div放在父form下； 3、向
-
本文向大家介绍Vue学习笔记之表单输入控件绑定，包括了Vue学习笔记之表单输入控件绑定的使用技巧和注意事项，需要的朋友参考一下 表单输入绑定 基础用法 文本 ### 多行文本 ### 复选框 爱好 单选按钮 性别 选择列表 单选列表 户口 多选列表（绑定到一个数组）： 绑定 value 对于单选按钮，勾选框及选择列表选项， v-model 绑定的 value 通常是静态字符串（对于勾选框是
-
本文向大家介绍AngularJS学习笔记之基本指令(init、repeat)，包括了AngularJS学习笔记之基本指令(init、repeat)的使用技巧和注意事项，需要的朋友参考一下 AngularJS学习笔记之基本指令(init、repeat) 以上所述上就是本文的全部内容了，希望大家能够喜欢。