编程 Python

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指令简单示例

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

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

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

- Author -

Rachel~Liu

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Python 相关文章推荐

使用Python编写提取日志中的中文的脚本的方法

Apr 30 Python

浅析Git版本控制器使用

Dec 10 Python

python实现淘宝秒杀聚划算抢购自动提醒源码

Jun 23 Python

python爬取足球直播吧五大联赛积分榜

Jun 13 Python

python实现n个数中选出m个数的方法

Nov 13 Python

Python中函数参数匹配模型详解

Jun 09 Python

python可视化爬虫界面之天气查询

Jul 03 Python

用Python实现最速下降法求极值的方法

Jul 10 Python

python Kmeans算法原理深入解析

Aug 23 Python

django 利用Q对象与F对象进行查询的实现

May 15 Python

OpenCV图片漫画效果的实现示例

Aug 18 Python

用sleep间隔进行python反爬虫的实例讲解

Nov 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