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 ...
随机推荐
- 通过命令上传到GitHub
从零开始命令行上传代码到GitHub 前情概要: 要提交代码到GitHub上,本来想要通过idea上传代码,然后去网上搜索了相关的文章,按照步骤一步一步的操作,结果还是没有弄好,也会出现各种各样的 ...
- react 05 router
安装 npm i react-router-dom -- save<Router basename="/admin"> <Route path="/&q ...
- 【C学习笔记】day3-2 计算1/1-1/2+1/3-1/4+1/5 …… + 1/99 - 1/100 的值。
#include <stdio.h> int main() { double sum = 0; double j = 1.0; for (int i = 1; i <= 100; i ...
- 0624.python入门
课堂笔记 一 编程语言 什么是编程语言? 上面提及的能够被计算机所识别的表达方式即编程语言,语言是沟通的介质,而编程语言是程序员与计算机沟通的介质.在编程的世界里,计算机更像是人的奴隶,人类编程的目的 ...
- vue实现记录分享是否有上级
前言: 项目需要做活动分享功能(增加网站.app等访问量),但是,,,无功不受禄,也就需要分享时带上级ID,好友中奖,本人也受同样优惠 需求开发: 开发一个活动后,本人参加之后,分享给好友,增加自身中 ...
- .NET CORE-通过内置IOC容器IServiceCollection进行服务注册
第一种方式: 在Startup中的ConfigureServices方法中注册服务: services.AddTransient<ITestServiceA, TestServiceA>( ...
- Pytest 插件
1. 执行标记用例执行次数 首先安装 repeat: pip install pytest-repeat @pytest.mark.repeat(n)执行当前用例 n 次 然后再往下执行其他用例 im ...
- Burpsuite 资料整理
Burpsuite 资料整理, 整到一起比较方便.大家有更多关于Burpsuite的Tip请一起增量.谢谢! 插件 序号 名称 功能 参考文档 1 Turbo intruder 并发 https:// ...
- Win上好用的App们
recaps 习惯了mac的输入法切换键(CapsLock),在win下真是各种不适应.于是,找到了这个recaps.亲测好用(Win10 LTSC,键盘布局添加的英文.中文,中文用的第三方输入法). ...
- boost asio 网络编程案例简单改写
boost教程:http://zh.highscore.de/cpp/boost/ 改写7.4网络编程案例,服务器支持连接多个客户端 服务端: #include <iostream> #i ...