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 ...
随机推荐
- fabric学习笔记9
fabric学习笔记9 20201303张奕博 2023.1.20 Python Web3 与智能合约的交互 开发合约,或者开源合约,都会有一份该合约的ABI JSON文件 ABI文件包括了智能合约的 ...
- Windows 下安装 Bun：像 Node 或 Deno 一样的现代 JavaScript 运行时
背景 最近前端工具链又火了一个项目 Bun,可以说内卷非常严重.Bun 是一个新的 JavaScript 运行时,内置了打包器.转译器.任务运行器和 npm 客户端. Bun 是像 Node 或 De ...
- SAP 后台任务定时job
定时任务的事务码 sm36:创建定时任务 sm37:查看定时任务 JDBG:后台任务debug,在对应的sm37中对应的job页面 t-code输入 创建定时任务SM36 名称可以随便起 一般都是按自 ...
- javaweb项目启动脚本
#存放的位置www_path=/home/project/api #编译好的jar名称jar_name=springboot1.0.jar #获取运行编译好的进程ID,便于我们在重新部署项目的时候先杀 ...
- python实现两张图片拼接
纵向拼接 from PIL import Image def image_splicing(pic01, pic02): """ 图片拼接 :param pic01: 图 ...
- vue样式穿透 滚动条隐藏 原生样式修改
样式穿透:deep,否则可能不能覆盖原有样式,vue2使用/v-deep/或者::v-deep,或者取消scoped,但不推荐,因为会影响到其他页面样式 <style lang="sc ...
- element-UI 如果获取表格当前行
表格获取当前行的方法,参考element-UI文档上,可以使用作用域插槽获取当前行的数据 // 通过 slot-scope 可以获取到 row, column, $index 和 store(tabl ...
- Java程序（数组扩容的尝试）
import java.util.Scanner; public class ArrayAdd { public static void main(String[] args) { int arr[] ...
- db2 linux创建用户后，登录报错
db2的数据库服务器, 创建用户及授权参考 https://blog.csdn.net/qq_24805831/article/details/102590084 按照步骤创建用户后,连接数据库报错: ...
- Postman 测试 Web Service 和 WCF
一.postman 测试web service(1)设置url http://www.oorsprong.org/websamples.countryinfo/countryinfoservice.w ...