vvv动态组件和keep-alive
<!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的更多相关文章
- vuejs动态组件给子组件传递数据
vuejs动态组件给子组件传递数据 通过子组件定义时候的props可以支持父组件给子组件传递数据,这些定义的props在子组件的标签中使用绑定属性即可,但是如果使用的是<component> ...
- C++ 类的动态组件化技术
序言: N年前,我们曾在软件开发上出现了这样的困惑,用VC开发COM组件过于复杂,用VB开发COM组件发现效率低,而且不能实现面向对象的很多特性,例如,继承,多态等.更况且如何快速封装利用历史遗留的大 ...
- Hibernate学习---第五节：普通组件和动态组件
一.普通组件映射配置 1.创建组件类,代码如下: package learn.hibernate.bean; /** * 组件类 */ public class Phones { private St ...
- vue2入坑随记(二) -- 自定义动态组件
学习了Vue全家桶和一些UI基本够用了,但是用元素的方式使用组件还是不够灵活,比如我们需要通过js代码直接调用组件,而不是每次在页面上通过属性去控制组件的表现.下面讲一下如何定义动态组件. Vue.e ...
- Vue动态组件
前面的话 让多个组件使用同一个挂载点,并动态切换,这就是动态组件.本文将详细介绍Vue动态组件 概述 通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以实现动 ...
- angular2 学习笔记 ( Dynamic Component 动态组件)
更新 2018-02-07 详细讲一下 TemplateRef 和 ViewContainerRef 的插入 refer : https://segmentfault.com/a/1190000008 ...
- Vue两种组件类型介绍：递归组件和动态组件
一递归组件 递归组件的特性就是可以在自己的template模板中调用自己本身.值得注意的它必须设置name属性. // 递归组件 recursive.vue <template> < ...
- vue动态组件切换（选项卡）
vue的动态组件 <template :is='变量'></template> 可以通过改变变量,来改变template的替换内容.达到选项卡的功能 如果想要切换保持不重新创建 ...
- Vue 组件&组件之间的通信 之 template模板引用与动态组件的使用
template模板引用 在component的template中书写大量的HTML元素很麻烦. Vue提供了<template>标签,可以在里边书写HTML,然后通过ID指定到组建内的t ...
- 详解vue组件的is特性：限制元素&动态组件
在vue.js组件教程的一开始提及到了is特性 意思就是有些元素,比如 ul 里面只能直接包含 li元素,像这样: <ul> <li></li> </ul&g ...
随机推荐
- 类型提示和python函数中'->'的用法
一.类型提示 在python中,我们定义一个有参函数,调用该函数时需要传入参数,如下所示: # 定义一个简单的函数 def get_full_name(first_name, last_name): ...
- ssm框架下的拦截器过滤静态资源以及拦截jsp
这篇文章如果能给你带来帮助 不胜荣幸,如果有错误 ,欢迎批评指正,共同进步. 今天啊搭了一个ssm的框架 虽然说现在大部分都在使用shiro权限,可是正如mybatis.hibernate和jdbc的 ...
- dfs-入门模板
模板 void dfs()//参数用来表示状态 { if(到达终点状态) { ...//根据题意添加 return; } if(越界或者是不合法状态) return; if(特殊状态)//剪枝 ret ...
- Centos 升级glibc 亲测好用
wget http://ftp.gnu.org/gnu/glibc/glibc-2.18.tar.gz tar zxf glibc-2.18.tar.gz cd glibc-2.18/ mkdir ...
- Chrome禁用开发者工具
在一次工作中,所做的项目要求页面中不能右击,不能打开F12.一般来说可以禁用F12的按键,但是可以通过开发者工具进入.经过个人实验,以下方法适用于谷歌浏览器.火狐浏览器,以及使用谷歌内核的浏览器(如Q ...
- jekins+svn
1.jekins安装可以看jekins+shell随笔. 2.安装svn. yum -y install subversion 3.配置相关文件 mkdir 家目录 cd 到家目录修改conf下三 ...
- pg9.6使用索引
使用索引 索引是用于快速数据检索操作的结构.在数据库世界中,索引与表相关联并用于有效定位数据,而无需查询数据库表中的每一行.如果表没有索引,则需要全表扫描才能找到记录,这在磁盘 I/O 和 CPU 利 ...
- CentOS 7.9 环境下构建 Python 3.9
sudo yum -y update sudo yum -y install yum-utils sudo yum-builddep -y python3 curl -O https://www.py ...
- linux办公
办公环境.生产环境: centos.redhat.big cloud 1.改PS1:生产主机的主机名太长了,每次显示占半行 [root@10.0.0.11 ~]$ echo $PS1 [\u@10.0 ...
- centos7清理docker垃圾文件
相信很多朋友都有这个docker容器导致主机磁盘空间满了的问题,应用容器在宿主机上长期运行,应用实例启停容器,会产生大量的停止的容器,无容器使用的数据卷.网络配置,无容器依赖的镜像,这些垃圾日积月累, ...