vue学习笔记之动态组件和v-once指令简单示例
更新时间：2020年02月29日 18:30:05 作者：Rachel~Liu
这篇文章主要介绍了vue学习笔记之动态组件和v-once指令,结合简单实例形式详细分析了vue.js动态组建点击切换相关操作技巧,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。
相关文章
数据常常被比作新时代的石油,就像石油需要经过提炼才能制造出汽油一样,数据也需要经过整理才能发挥其作用,Python作为最广泛使用的编程语言之一,提供了强大的数据整理工具,本文给大家介绍了Python数据清理的技巧,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了python自动获取微信公众号最新文章,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-07-07
大家好，本篇文章主要讲的是Python处理excel与txt文件详解，感兴趣的同学赶快来看一看吧，对你有帮助的话记得收藏一下，方便下次浏览2021-12-12
这篇文章主要介绍了Python 内置函数sorted()的用法,文章内容介绍详细具有一的参考价值，需要的小伙伴可以参考一下，希望对你的学习有所帮助2022-03-03
这篇文章主要介绍了Python爬虫爬取一个网页上的图片地址实例代码，具有一定借鉴价值,需要的朋友可以参考下2018-01-01
这篇文章主要为大家详细介绍了python实现自动下载sftp文件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
大家好，本篇文章主要讲的是Python写代码的七条重要技巧介绍，感兴趣的同学赶快来看一看吧，对你有帮助的话记得收藏一下，方便下次浏览2021-12-12
这篇文章主要介绍了Python中join 和 split详解的相关资料,本文还通过一个示例给大家介绍python join 和 split方法 的使用，需要的朋友可以参考下2016-06-06
Python基于argparse与ConfigParser库进行入参解析与ini parser
这篇文章主要介绍了Python基于argparse与ConfigParser库进行入参解析与ini parser，帮助大家更好的理解和使用python，感兴趣的朋友可以了解下2021-02-02
这篇文章主要介绍了Redis之windows下主从复制案例讲解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-08-08
最新评论