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 相关文章推荐
pymongo给mongodb创建索引的简单实现方法
May 06 Python
python中reduce()函数的使用方法示例
Sep 29 Python
Python单元测试简单示例
Jul 03 Python
python之文件读取一行一行的方法
Jul 12 Python
python调用百度语音REST API
Aug 30 Python
Python做智能家居温湿度报警系统
Sep 25 Python
Python寻找两个有序数组的中位数实例详解
Dec 05 Python
python list数据等间隔抽取并新建list存储的例子
Nov 27 Python
tensorboard实现同时显示训练曲线和测试曲线
Jan 21 Python
python画图常规设置方式
Mar 05 Python
Python中如何引入第三方模块
May 27 Python
浅谈Python3中datetime不同时区转换介绍与踩坑
Aug 02 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中http与https跨域共享session的解决方法
2014/12/20 PHP
PHP动态输出JavaScript代码实例
2015/02/12 PHP
PHP JSON格式的中文显示问题解决方法
2015/04/09 PHP
php实现smarty模板无限极分类的方法
2015/12/07 PHP
详解php中反射的应用
2016/03/15 PHP
php头像上传预览实例代码
2017/05/02 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
PHP论坛实现积分系统的思路代码详解
2020/06/01 PHP
非常不错的功能强大代码简单的管理菜单美化版
2008/07/09 Javascript
JQuery 操作Javascript对象和数组的工具函数小结
2010/01/22 Javascript
js实现简单锁屏功能实例
2015/05/27 Javascript
jquery获取复选框checkbox的值实现方法
2016/05/30 Javascript
jQuery获取单击节点对象的方法
2016/06/02 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
JavaScript轮播图简单制作方法
2017/02/20 Javascript
vue-quill-editor富文本编辑器简单使用方法
2018/09/21 Javascript
vue.js多页面开发环境搭建过程
2019/04/24 Javascript
js实现提交前对列表数据的增删改查
2020/01/16 Javascript
原生js实现的金山打字小游戏(实例代码详解)
2020/03/16 Javascript
[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Pycharm学习教程(1) 定制外观
2017/05/02 Python
Python基于贪心算法解决背包问题示例
2017/11/27 Python
python导入csv文件出现SyntaxError问题分析
2017/12/15 Python
python pandas 如何替换某列的一个值
2018/06/09 Python
Python 读取用户指令和格式化打印实现解析
2019/09/02 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
python针对Oracle常见查询操作实例分析
2020/04/30 Python
HTML5进阶段内联标签汇总(小篇)
2016/07/13 HTML / CSS
NUK奶瓶美国官网:NUK美国
2016/09/26 全球购物
《雨霖铃》听课反思
2014/02/13 职场文书
土地转让协议书范本
2014/04/15 职场文书
学校清明节活动总结
2014/07/04 职场文书
财务总监岗位职责
2015/02/03 职场文书
财务总监岗位职责范本
2015/04/03 职场文书