<!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. 1055. Combinations

    1055. Combinations Time limit: 1.0 secondMemory limit: 64 MB As you have known MMM corporation lab r ...

  2. 使用windows平板学习与办公的一些经历（酷比魔方i9篇）

    大概是在2019年的时候,我在某平台上购买了900元的二手windows平板电脑,酷比魔方i9 首先谈谈背景.当时我手里是有个笔记本,屏幕大概15.6寸,4G+256G的,平时用的时候功率平均20几W ...

  3. elasticsearch别名

    es创建别名的好处: 1.不暴露索引名 2.可以为多个结构类似的索引(动态索引)创建相同的别名,查询的时候直接查询别名 ,然后自动匹配多个索引. 在不同的索引创建窗口.比如,如果为数据创建了每日索引, ...

  4. SVN检出未响应，版本库浏览打不开卡死。

    今天遇到一个奇葩问题. 1.换了新电脑,首先SVN地址没问题.检出就未响应,不弹出输入用户名,密码. 2.发现装了讯软加密软件,后安装的SVN.(未告知管理员,对新机加密软件配置).配置完可以正常用了 ...

  5. Cookie解码编码

    这两天给客户做竞价推广时发生一件奇怪的事情: 用户搜索关键词是AA匹配关键词是AB,等于关键词和要推广的单元完全匹配,那么用户点击创意进入网站时的Url应该就是A的: 但偶然发现关键词匹配了,url却 ...

  6. nginx客户端真实IP配置

    https://www.cnblogs.com/kevingrace/p/8269955.html include mime.types; default_type application/octet ...

  7. react项目--路由封装

    import React, { lazy } from "react"; import Home from "../views/Home"; import Lo ...

  8. A Novel Cross-domain Access Control Protocol in Mobile Edge Computing

    摘要 随着智能移动终端和移动通信技术的发展,移动边缘计算(MEC)已经应用到各个领域.然而,MEC也带来了新的数据安全威胁,包括数据访问威胁.针对MEC中的跨域访问控制问题,提出一种跨域访问控制协议C ...

  9. fetch，axios简介与语法

    fetch简介&语法 留心:像之前的XMLHttpRequest 但并不真的是,而是代替的 #概念:fetch是ecma组织基于promise开发http api ,用来代替xhr  #语法: ...

  10. 性能测试-IO密集型-直接会话可能会断了，命令执行不了

    1.IO密集型模拟命令 该命令会开启1个worker不停的读写临时文件,同时启动6个workers不停的调用sync系统调用提交缓存 stress-ng -i 6 --hdd 1 --timeout ...