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和Ruby中each循环引用变量问题(一个隐秘BUG?)
Jun 04 Python
Python学习笔记之os模块使用总结
Nov 03 Python
Python实现Tab自动补全和历史命令管理的方法
Mar 12 Python
python获取标准北京时间的方法
Mar 24 Python
TensorFlow入门使用 tf.train.Saver()保存模型
Apr 24 Python
点球小游戏python脚本
May 22 Python
Django中的FBV和CBV用法详解
Sep 15 Python
python 发送json数据操作实例分析
Oct 15 Python
在flask中使用python-dotenv+flask-cli自定义命令(推荐)
Jan 05 Python
Python中sorted()排序与字母大小写的问题
Jan 14 Python
jupyter 导入csv文件方式
Apr 21 Python
Python采集壁纸并实现炫轮播
Apr 30 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之第四天
2006/10/09 PHP
解决phpmyadmin 乱码,支持gb2312和utf-8
2006/11/20 PHP
PHP数组与对象之间使用递归实现转换的方法
2015/06/24 PHP
jQuery ajax+PHP实现的级联下拉列表框功能示例
2019/02/12 PHP
使用Javascript和DOM Interfaces来处理HTML
2006/10/09 Javascript
jQuery 1.2.x 升? 1.3.x 注意事项
2009/05/06 Javascript
jQuery弹出(alert)select选择的值
2013/04/21 Javascript
js 程序执行与顺序实现详解
2013/05/13 Javascript
js实现的常用的左侧导航效果
2013/10/17 Javascript
js简单实现HTML标签Select联动带跳转
2013/10/23 Javascript
JS 在指定数组中随机取出N个不重复的数据
2014/06/10 Javascript
jQuery验证插件validation使用指南
2015/04/21 Javascript
JavaScript数组迭代器实例分析
2015/06/09 Javascript
js中的关联数组与普通数组详解
2016/07/27 Javascript
Bootstrap基本插件学习笔记之折叠(22)
2016/12/08 Javascript
微信小程序实现图片轮播及文件上传
2017/04/07 Javascript
利用JS实现简单的瀑布流加载图片效果
2017/04/22 Javascript
vue项目中使用ueditor的实例讲解
2018/03/05 Javascript
微信小程序之自定义组件的实现代码(附源码)
2018/08/02 Javascript
小程序点赞收藏功能的实现代码示例
2018/09/07 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
2019/01/08 Javascript
新手入门带你学习JavaScript引擎运行原理
2019/06/24 Javascript
Webpack 4如何动态切割JS注入文件名详解
2019/07/09 Javascript
Python通过poll实现异步IO的方法
2015/06/04 Python
python实现画五角星和螺旋线的示例
2019/01/20 Python
深入了解Python 变量作用域
2020/07/24 Python
使用CSS3制作响应式导航菜单的方法
2015/07/12 HTML / CSS
利用 Canvas实现绘画一个未闭合的带进度条的圆环
2019/07/26 HTML / CSS
英国最大的电脑零售连锁店集团:PC World
2016/10/10 全球购物
英国豪华文具和皮具配件经典老品牌:Smythson(斯迈森)
2018/04/19 全球购物
幼师自我鉴定
2014/02/01 职场文书
会走路的树教学反思
2014/02/20 职场文书
销售目标责任书
2014/07/23 职场文书
人事局接收函
2015/01/31 职场文书
关于运动会的宣传稿
2015/07/23 职场文书
《鲸》教学反思
2016/02/23 职场文书