<!DOCTYPE html>
<html>
<head>
<style>

</style>
<script src="a.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>

const app = Vue.createApp({

    data(){

        return {

            currentItem:'input-item'

        }

},

methods:{

    zmf(){

        this.currentItem = this.currentItem === 'input-item'?'common-item':'input-item'

    }

},

template:`

<keep-alive>

<component :is="currentItem"/>

</keep-alive>

<!-- <input-item v-show="currentItem === 'input-item'" /> -->

<!-- <common-item v-show="currentItem === 'common-item'" /> -->

<button @click="zmf">zmf</button>

`

})

app.component('input-item',{

template:`

<div>

    input-item

</div>

`

})

app.component('common-item',{

template:`

<div>

    common-item

</div>

`

})

const vm = app.mount('#root')

</script>
</html>

vvv动态组件和keep-alive的更多相关文章

  1. vuejs动态组件给子组件传递数据

    vuejs动态组件给子组件传递数据 通过子组件定义时候的props可以支持父组件给子组件传递数据,这些定义的props在子组件的标签中使用绑定属性即可,但是如果使用的是<component> ...

  2. C++ 类的动态组件化技术

    序言: N年前,我们曾在软件开发上出现了这样的困惑,用VC开发COM组件过于复杂,用VB开发COM组件发现效率低,而且不能实现面向对象的很多特性,例如,继承,多态等.更况且如何快速封装利用历史遗留的大 ...

  3. Hibernate学习---第五节：普通组件和动态组件

    一.普通组件映射配置 1.创建组件类,代码如下: package learn.hibernate.bean; /** * 组件类 */ public class Phones { private St ...

  4. vue2入坑随记(二) -- 自定义动态组件

    学习了Vue全家桶和一些UI基本够用了,但是用元素的方式使用组件还是不够灵活,比如我们需要通过js代码直接调用组件,而不是每次在页面上通过属性去控制组件的表现.下面讲一下如何定义动态组件. Vue.e ...

  5. Vue动态组件

    前面的话 让多个组件使用同一个挂载点,并动态切换,这就是动态组件.本文将详细介绍Vue动态组件 概述 通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以实现动 ...

  6. angular2 学习笔记 ( Dynamic Component 动态组件)

    更新 2018-02-07 详细讲一下 TemplateRef 和 ViewContainerRef 的插入 refer : https://segmentfault.com/a/1190000008 ...

  7. Vue两种组件类型介绍：递归组件和动态组件

    一递归组件 递归组件的特性就是可以在自己的template模板中调用自己本身.值得注意的它必须设置name属性. // 递归组件 recursive.vue <template> < ...

  8. vue动态组件切换（选项卡）

    vue的动态组件 <template :is='变量'></template> 可以通过改变变量,来改变template的替换内容.达到选项卡的功能 如果想要切换保持不重新创建 ...

  9. Vue 组件&组件之间的通信 之 template模板引用与动态组件的使用

    template模板引用 在component的template中书写大量的HTML元素很麻烦. Vue提供了<template>标签,可以在里边书写HTML,然后通过ID指定到组建内的t ...

  10. 详解vue组件的is特性：限制元素&动态组件

    在vue.js组件教程的一开始提及到了is特性 意思就是有些元素,比如 ul 里面只能直接包含 li元素,像这样: <ul> <li></li> </ul&g ...

随机推荐

  1. el-dialog 遮罩层覆盖内容的问题

    页面组件层级太多,就会出现遮罩层覆盖dialog里面内容的问题 解决:  :append-to-body="true" 把遮罩层添加到body上面    用z-index 设置没效 ...

  2. 采集存储计算处理卡设计原理图：619-基于6U VPX的双FMC ZU19EG 采集存储计算处理卡

    619-基于6U VPX的双FMC ZU19EG 采集存储计算处理卡   基于6U VPX的双FMC ZU19EG 采集存储计算处理卡 一.板卡概述 该板卡是采集.存储.计算.管理一体的高集成度.加固 ...

  3. ns 状态为Terminating

    kubectl delete ns harbor --force --grace-period=0harbor状态为Terminatingkubectl proxy --port=6880kubect ...

  4. allure安装配置

    代理节点配置allure 下载allure https://repo.maven.apache.org/maven2/io/qameta/allure/allure-commandline 配置环境变 ...

  5. Vue.js中使用iView日期选择器并设置开始时间结束时间校验

    废话不多说直接上代码,拷贝代码保存为 html 文件,用浏览器打开就可以看到效果. 在线查看效果:https://run.iviewui.com/PmGsUW3P 1 <!DOCTYPE htm ...

  6. js-垃圾回收

    js 是垃圾回收的语言,也就是执行环境负责在代码执行时管理内存.1. 标记清理 垃圾回收程序时,会标记内存中存储的所有变量,然后会将所有在上下文中的变量,以及被在上下文中的变量引用的变量标记去掉.在此 ...

  7. parse data from Nacos error

    SpringCloud Alibaba从Nacos读取配置文件. 在开发工具运行,没有问题,正常启动. 打包后,jar包启动 xxxx.jar,出现错误: 2022-10-11 11:20:25.28 ...

  8. zzul1058_Java

    import java.util.Scanner;public class zzul1058 { public static void main(String[] args) { Scanner in ...

  9. yagmail 邮件模块

    安装 yagmail 安装yagmail:https://coding.net/s/01e2c2fe-82c0-4e05-a31b-f3e9e2dbc43a 下载完成之后,cmd 切换到文件目录下,执 ...

  10. version libcrypto.so.10 not defined in file libcrypto.so.10 with link time reference

    I have installed IC618 latest version. But, after installation when I fire virtuoso I see following ...