vue学习笔记之动态组件和v-once指令简单示例
作者：Rachel~Liu 发布时间：2024-01-01 07:50:52
标签：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程序设计有所帮助。
来源：https://blog.csdn.net/qq_33866063/article/details/89791212
0
投稿猜你喜欢
不久前因业务需要，我在自己的笔记本中安装了搜霸。当时一个做平面的朋友过来和我做一些设计交流，我在笔记本前准备输入一个网址，他靠近我的电脑，大- 最初打算使用scroll-view实现，效果好、流畅、有惯性滑动，但由于滚动条没法去掉、无法实现上下层的帧布局，最终放弃了。还是自己写个吧，
- 本文实例讲述了Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能。分享给大家供大家参考，具体如下：公司要写一些
- 本文实例分析了Go语言中普通函数与方法的区别。分享给大家供大家参考。具体分析如下：1.对于普通函数，接收者为值类型时，不能将指针类型的数据直
- python txt中的文件,逐行读取并且每行赋值给变量最近想做自动化，想到可能会用到很多账号密码，所以想到了用参数化，但是一个用户，一个密
- 直接使用word文档已经难不倒大家了，有没有想过用python构建一个word文档写点文章呢？当然这个文章的框架需要我们用代码一点点的建立，
- 目录题目描述：思路：代码：改良版采用递归数学方法题目描述：编写一个算法来确定一个数字是否“快乐”。 快乐的数字按照如下方式确定：从一个正整数
- 1 数据准备1.1 新建数据表CREATE TABLE `player` ( `id` bigint(20) NOT NULL
- 这篇文章主要介绍了Python检查 云备份进程是否正常运行代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价
- 计算字符长度的js函数function LEN(str){ var i,sum=0; for(i=0;i<str.length;i++
- python在进行字符串的拼接时，一般有两种方法，一种是使用+直接相加，另一种是使用joina = "tests"b =
- 那里都有狭窄的空间：网页横幅、新闻标题处的空间、柱状的广告，但一张来自照相机的照片却要大很多，它们的比例一般是 6 × 4 英寸 。你如何处
- 简介网上流传的部分可以百度关键词“Python”和“word”后查看文章学习，以下内容为个人实践，修正了不能运行出错的情况。代码示例impo
- 如下所示：col_n = ['名称','收盘价','日期']a = pd.DataFrame
- 本文实例讲述了Python输出PowerPoint（ppt）文件中全部文字信息的方法。分享给大家供大家参考。具体分析如下：下面的代码依赖于w
- 主要介绍了SQL删除语句DROP、TRUNCATE、 DELETE 的区别，帮助大家更好的理解和学习sql语句，感兴趣的朋友可以了解下DRO
- 问题如何设定matplotlib输出的图片大小？import matplotlib.pyplot as plt一、plt.figure(fi
- 第一招、mysql服务的启动和停止net stop mysqlnet start mysql第二招、登陆mysql语法如下： mysql -
- MySQL使用环境变量TMPDIR的值作为保存临时文件的目录的路径名。如果未设置TMPDIR，MySQL将使用系统的默认值，通常为/tmp、
- 知识点：字符串在编程里，用的最多的就是字符串，字符串同时也是各类数据的中转站字符串运算符：编号运算符类型说明1+字符串拼接2*同一字符串多次
