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 ...
随机推荐
- vue框架2
插值语法 mvvm演示 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- js获取的 后端的列表。
1.引号被转码 处理办法 {% autoescape off %} var tmp = '{{ data1 }}'; var tmp = '{{ data2 }}'; {% endautoescape ...
- hexo-theme-tree
Hexo 主题 Tree 一个简洁的主题,主要功能是 "树状导航" + "树状目录",可选配"评论"和"阅读量"功能,支 ...
- 1、docker 安装
1 准备三台linux服务器 2 docker安装 三台机器全部执行docker安装操作 2.1 移除以前docker相关包 sudo yum remove docker \ docker-clien ...
- HCIP-进阶实验03-网络流量路径控制
HCIP-进阶实验03-网络流量路径控制 实验需求 某城域网网络环境部署规划如图所示,该网络通过OSPF协议进行部署设计,分为四个区域,分别为骨干区域0.普通区域1.2.3.其中普通区域1为特殊区域N ...
- python菜鸟学习： 11. 装饰器的基础用法
# -*- coding: utf-8 -*-# decorator# 定义:本质是函数,就是为其他函数添加附件功能# 原则:# 1.不能修改被装饰的函数的源代码# 2.不能修改被装饰的函数的调用方式 ...
- 阿里云centos7搭建docker，拉取镜像外网访问不通的问题排查
最近新买了一个阿里云服务器,用docker安装了mysql,外网死活连接不上我的mysql,最终经过一顿猛百度查问题,找出问题根源.对这次查问题过程中出现的问题也有一些心得,也小小记录一下复盘总结. ...
- [Swift]Swift图片显示方式设置，控件UIImageView的contentMode属性设置
contentMode属性是用来设置图片在UIImageView中的显示方式,如:拉伸.居中.填充等. 这里讨论的是UIImageView宽高固定,图片宽高不确定的情况.如社交APP的相册缩略图.手机 ...
- Postman 测试 Web Service 和 WCF
一.postman 测试web service(1)设置url http://www.oorsprong.org/websamples.countryinfo/countryinfoservice.w ...
- 无线网络技术 实验2 无线网络环境RSSI测试实验
1.实验目的与要求 ①.了解RSSI的概念和基本原理 ②.掌握RSSI测量过程和方法 ③.不同无线环境下RSSI值测量 2.实验仪器材料:个人计算机 Windows操作系统 个人热点 3.实验过程记录 ...