<!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. pypeeter 自动化

    Pypputeer Puppeteer 是 Google 基于 Node.js 开发的一个工具,而 Pyppeteer 又是什么呢?它实际上是 Puppeteer 的 Python 版本的实现,但它不 ...

  2. 基于VS码代码时出现访问错误的个人理解

    日常在VS写代码中,有时候我们将写好的代码调试出来会出现有未经处理的异常,在0x00000000XXXX处有未经处理的异常,写入位置0xFFFFFFFFFFFFXX时发生访问冲突. 类似于图中情况,遇 ...

  3. git commit提交代码时跳过 eslint校验

    在使用命令 git commit -m '提交信息' 将本地代码提交到远程仓库时候, 如果项目安装了 per-commit,则会在Git键入提交信息前进行代码风格检查,如果代码不符合相应规则,则报错. ...

  4. 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 ...

  5. Could not match supplied host pattern, ignoring: 192.168.0.101

    [root@ansible ansible]# ansible 192.168.0.101 -m ping[WARNING]: Could not match supplied host patter ...

  6. SQL Server创建dblink跨库查询

    dblink是跨库查询的主要手段,在Oracle创建DbLink中已经演示了Oracle中如何创建及使用DbLink,这篇博客看看SQL Server中如何使用. 一.通过图形化界面直接创建 选择当前 ...

  7. nginx 结合tomcat 双机热备

    相信很多人都听过nginx,这个小巧的东西慢慢地在吞食apache和IIS的份额.那究竟它有什么作用呢?可能很多人未必了解. 说到反向代理,可能很多人都听说,但具体什么是反向代理,很多人估计就不清楚了 ...

  8. Spring 的XML配置文件中提示的配置

    1.看图:2.关于web.xml配置文件提示(1)下载(保存)http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd文件.(2)在eclipse中 Window ...

  9. springboot整合mybatis以及mybatis源码分析

    1.@ComponentScan basePackages与value: 用于指定包的路径,进行扫描 basePackageClasses: 用于指定某个类的包的路径进行扫描 nameGenerato ...

  10. PowerShell Regex

    PowerShell默认按每一行遍历去匹配模式 比如"aaa`nbbb"用"a.*b"是匹配不到的 需要用"(?s)a.*b"来匹配 1. ...