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 相关文章推荐
wxPython框架类和面板类的使用实例
Sep 28 Python
简单理解Python中基于生成器的状态机
Apr 13 Python
在Python中使用lambda高效操作列表的教程
Apr 24 Python
详解Python的单元测试
Apr 28 Python
Python验证文件是否可读写代码分享
Dec 11 Python
Python学习之Django的管理界面代码示例
Feb 10 Python
Django添加favicon.ico图标的示例代码
Aug 07 Python
Python 获取windows桌面路径的5种方法小结
Jul 15 Python
tensorflow tf.train.batch之数据批量读取方式
Jan 20 Python
解决keras使用cov1D函数的输入问题
Jun 29 Python
基于django2.2连oracle11g解决版本冲突的问题
Jul 02 Python
pycharm 如何查看某一函数源码的快捷键
May 12 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
第十二节 类的自动加载 [12]
2006/10/09 PHP
用PHP写的MySQL数据库用户认证系统代码
2007/03/22 PHP
Codeigniter整合Tank Auth权限类库详解
2014/06/12 PHP
php事务处理实例详解
2014/07/11 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
为超链接加上disabled后的故事
2010/12/10 Javascript
jquery插件 autoComboBox 下拉框
2010/12/22 Javascript
利用毫秒减值计算时长的js代码
2013/09/22 Javascript
js加入收藏夹代码(兼容ie/ff/op)
2014/05/16 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
2015/10/17 Javascript
基于jquery实现ajax无刷新评论
2020/08/19 Javascript
微信小程序实现多个按钮toggle功能的实例
2017/06/13 Javascript
angularjs2中父子组件的数据传递的实例代码
2017/07/05 Javascript
Vue.js用法详解
2017/11/13 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
2018/09/02 Javascript
微信小程序基于Taro的分享图片功能实践详解
2019/07/12 Javascript
基于JS实现视频上传显示进度条
2020/05/12 Javascript
vue-iview动态新增和删除的方法
2020/06/17 Javascript
[47:12]TFT vs Secret Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
收集的几个Python小技巧分享
2014/11/22 Python
Python中生成器和yield语句的用法详解
2015/04/17 Python
玩转python爬虫之cookie使用方法
2016/02/17 Python
Python中str.join()简单用法示例
2018/03/20 Python
对python append 与浅拷贝的实例讲解
2018/05/04 Python
对Pandas MultiIndex(多重索引)详解
2018/11/16 Python
Python实现的对本地host127.0.0.1主机进行扫描端口功能示例
2019/02/15 Python
Pycharm远程调试原理及具体配置详解
2019/08/08 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
10行Python代码计算汽车数量的实现方法
2019/10/23 Python
python ETL工具 pyetl
2020/06/07 Python
Pycharm Plugins加载失败问题解决方案
2020/11/28 Python
戴尔荷兰官方网站:Dell荷兰
2020/10/04 全球购物
学生党员思想汇报范文
2014/01/09 职场文书
2014年小班元旦活动方案
2014/02/16 职场文书
SpringCloud Feign请求头删除修改的操作代码
2022/03/20 Java/Android