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实现数通设备端口监控示例
Apr 02 Python
Python八大常见排序算法定义、实现及时间消耗效率分析
Apr 27 Python
nohup后台启动Python脚本,log不刷新的解决方法
Jan 14 Python
python图像处理入门(一)
Apr 04 Python
Pandas之MultiIndex对象的示例详解
Jun 25 Python
python kafka 多线程消费者&amp;手动提交实例
Dec 21 Python
pytorch方法测试——激活函数(ReLU)详解
Jan 15 Python
Python unittest单元测试框架及断言方法
Apr 15 Python
Python全局变量与global关键字常见错误解决方案
Oct 05 Python
python requests模块的使用示例
Apr 07 Python
利用Python网络爬虫爬取各大音乐评论的代码
Apr 13 Python
python 中的jieba分词库
Nov 23 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中JSON的使用与转换
2015/01/14 PHP
php结合web uploader插件实现分片上传文件
2016/05/10 PHP
PHP 网站修改默认访问文件的nginx配置
2017/05/27 PHP
PHP实现的ID混淆算法类与用法示例
2018/08/10 PHP
PHP数据对象映射模式实例分析
2019/03/29 PHP
JQuery SELECT单选模拟jQuery.select.js
2009/11/12 Javascript
javascript向后台传送相同属性的参数即数组参数
2014/02/17 Javascript
JavaScript判断文件上传类型的方法
2014/09/02 Javascript
详解JavaScript的Polymer框架中的通知交互
2015/07/29 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
2015/12/22 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
2016/02/17 Javascript
angular2倒计时组件使用详解
2017/01/12 Javascript
node.js 用socket实现聊天的示例代码
2017/10/17 Javascript
JavaScript设计模式之建造者模式实例教程
2018/07/02 Javascript
JS中的const命令你真懂它吗
2020/03/08 Javascript
JavaScript实现筛选数组
2021/03/02 Javascript
[50:28]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs KG
2018/04/01 DOTA
Python中的模块和包概念介绍
2015/04/13 Python
python+selenium打印当前页面的titl和url方法
2018/06/22 Python
Python定义二叉树及4种遍历方法实例详解
2018/07/05 Python
Python如何用filter函数筛选数据
2020/03/05 Python
python numpy库np.percentile用法说明
2020/06/08 Python
澳大利亚潮流尖端的快时尚品牌:Cotton On
2016/09/26 全球购物
美国滑板店:Tactics
2020/11/08 全球购物
荷兰美妆护肤品海淘网站:Beautinow(中文)
2020/11/22 全球购物
自主招生自荐信格式
2013/12/03 职场文书
银行门卫岗位职责
2013/12/29 职场文书
致跳远、跳高运动员广播稿
2014/01/09 职场文书
高中生操行评语大全
2014/04/25 职场文书
小学校园之星事迹材料
2014/05/16 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
国防教育标语
2014/10/08 职场文书
幼儿园端午节活动总结
2015/05/05 职场文书
拖欠货款起诉状
2015/05/20 职场文书
用Python远程登陆服务器的步骤
2021/04/16 Python
vue选项卡切换的实现案例
2022/04/11 Vue.js