vue学习笔记之动态组件和v-once指令简单示例


Posted in Python onFebruary 29, 2020

本文实例讲述了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>

运行结果:

vue学习笔记之动态组件和v-once指令简单示例

vue学习笔记之动态组件和v-once指令简单示例

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。

Python 相关文章推荐
Python 调用DLL操作抄表机
Jan 12 Python
在Windows8上的搭建Python和Django环境
Jul 03 Python
Python入门篇之对象类型
Oct 17 Python
菜鸟使用python实现正则检测密码合法性
Jan 05 Python
Python 比较两个数组的元素的异同方法
Aug 17 Python
快速查询Python文档方法分享
Dec 27 Python
python实现远程通过网络邮件控制计算机重启或关机
Feb 22 Python
利用Python读取txt文档的方法讲解
Jun 23 Python
Django结合ajax进行页面实时更新的例子
Aug 12 Python
python和php学习哪个更有发展
Jun 17 Python
Python文件操作及内置函数flush原理解析
Oct 13 Python
python爬虫用request库处理cookie的实例讲解
Feb 20 Python
Python实现动态给类和对象添加属性和方法操作示例
Feb 29 #Python
Python使用type动态创建类操作示例
Feb 29 #Python
Django框架静态文件处理、中间件、上传文件操作实例详解
Feb 29 #Python
Python编程快速上手——强口令检测算法案例分析
Feb 29 #Python
Python编程快速上手——strip()函数的正则表达式实现方法分析
Feb 29 #Python
python通用读取vcf文件的类(复制粘贴即可用)
Feb 29 #Python
Python编程快速上手——疯狂填词程序实现方法分析
Feb 29 #Python
You might like
PHP使用PDO抽象层获取查询结果的方法示例
2018/05/10 PHP
用jscript实现新建word文档
2007/06/15 Javascript
两种WEB下的模态对话框 (asp.net或js的分别实现)
2009/12/02 Javascript
固定表格行列(expression)在IE下适用
2013/07/25 Javascript
js闭包的用途详解
2014/11/09 Javascript
js点击按钮实现带遮罩层的弹出视频效果
2015/12/19 Javascript
百度地图给map添加右键菜单(判断是否为marker)
2016/03/04 Javascript
微信小程序  自定义创建详细介绍
2016/10/27 Javascript
Javascript中document.referrer隐藏来源的方法
2017/01/16 Javascript
jQuery开源组件BootstrapValidator使用详解
2017/06/29 jQuery
原生JS实现的轮播图功能详解
2018/08/06 Javascript
JQuery常见节点操作实例分析
2019/05/15 jQuery
layui导出所有数据的例子
2019/09/10 Javascript
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
微信小程序实现加入购物车滑动轨迹
2020/11/18 Javascript
[36:14]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第二局
2016/02/28 DOTA
python实现udp数据报传输的方法
2014/09/26 Python
Python实现简单截取中文字符串的方法
2015/06/15 Python
python实现类之间的方法互相调用
2018/04/29 Python
pygame游戏之旅 添加游戏介绍
2018/11/20 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
python使用html2text库实现从HTML转markdown的方法详解
2020/02/21 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
Python包资源下载路径报404解决方案
2020/11/05 Python
python之pygame模块实现飞机大战完整代码
2020/11/29 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
阿迪达斯香港官网:adidas香港
2019/11/09 全球购物
物业管理应届生求职信
2013/10/28 职场文书
家居饰品店创业计划书
2014/01/31 职场文书
感恩父母的演讲稿
2014/05/06 职场文书
技能比武方案
2014/05/21 职场文书
关于长城的导游词
2015/01/30 职场文书
网络研修心得体会
2016/01/08 职场文书
导游词之井冈山
2019/11/20 职场文书
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL