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列表中删除重复元素的三种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2025-01-01
详解Python NumPy如何使用argsort方法进行排序
NumPy提供了各种功能强大的数组操作方法,其中之一就是argsort方法,本文将详细介绍argsort方法的使用,以及如何在实际项目中充分利用它进行排序操作,希望对大家有所帮助2024-03-03
这篇文章主要介绍了利用python和百度地图API实现数据地图标注的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
下面小编就为大家分享一篇Python 实现引用其他.py文件中的类和类的方法，具有的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-04-04
压缩和解压缩是日常常用的操作，不管是windows上图形界面的操作，还是linux上用命令来进行压缩解压缩，总的而言都还是比较方便的，本文通过案例代码讲解了python3压缩和解压文件的方法，2023-02-02
本文将通过股票均线计算的案例来为大家讲解一下NumPy中的线性关系以及数据修剪压缩的实现，文中的示例代码讲解详细，感兴趣的可以了解一下2022-05-05
这篇文章主要为大家介绍了一个有趣的小案例——利用Python编写个有趣的记仇本，文中的示例代码讲解详细，感兴趣的小伙伴可以尝试一下2023-04-04
今天小编就为大家分享一篇python清除函数占用的内存方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-06-06
这篇文章主要为大家详细介绍了python实现FTP循环上传文件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
在本篇文章里小编给大家分享了一篇关于python3处理word文档实例分析内容，有兴趣的朋友们可以参考下。2020-12-12
最新评论