big.vue

<template>
<div>
big
<p>{{view}}</p>
<!--标准规范-->
<component :is='view'></component>
<button @click="changeView">切换组件</button>
<button @click="changeViewLife">切换组件2</button>

<!--做到一个缓存效果,实时更新的数据不能用-->
<keep-alive>
<component :is='view'></component>
</keep-alive>
</div>
</template>

<script>
import Small1 from './small1'
import Small2 from './small2'
export default{
name:'big',
data(){
return{
view:'Small1',
flag:true
}
},
methods:{
changeView(){
this.view = 'Small2'
},
changeViewLife(){
if(this.flag){
this.view = 'Small1'
this.flag = false
}else{
this.view = 'Small2'
this.flag = true
}
}
},
components:{
Small1,
Small2
}
}
</script>

<style>
</style>

small1.vue

<template>
<div>small1</div>
</template>

<script>
export default{
name:'small1',
data(){
return{

}
},
methods:{

}
}
</script>

<style>
</style>

small2.vue

<template>
<div>small2</div>
</template>

<script>
export default{
name:'small2',
data(){
return{

}
},
methods:{

}
}
</script>

<style>
</style>

vue动态切换视图的更多相关文章

  1. 第八十七篇:Vue动态切换组件的展示和隐藏

    好家伙, 1.什么是动态组件? 动态组件指的是动态切换组件的限制与隐藏 2.如何实现动态组件渲染 vue提供了一个内置的<component>组件,专门用来实现动态组件的渲染. 可以将其看 ...

  2. VUE 动态切换列表active样式

    参考VUE官方文档样式绑定 https://cn.vuejs.org/v2/guide/class-and-style.html 需求是动态加载出来了所有菜单列表,点击其中一个li元素改变这个元素的背 ...

  3. vue动态切换组件

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>& ...

  4. vue动态切换页面

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 动态切换采用 CSplitterWnd 静态划分的视图布局(MFC)

    标题读起来有些拗口,具体是什么情况,我们来看: 一.问题的提出 一个采用MFC开发的软件,其窗体视图采用CSplitterWnd三分,效果如下图所示: 图1 软件的默认视图布局 该MFC开发的软件功能 ...

  6. laravel4通过控制视图模板路劲来动态切换主题

    通过控制视图模板路劲来动态切换主题 App::before(function($request) { $paths = Terminal::isMobile() ? array(__dir__.'/v ...

  7. Vue.js-----轻量高效的MVVM框架(十二、组件动态切换)

    在写html的过程中,我们经常会遇到要写tabs的切换,类似于这样: 在vue中,我们也有自己的组件和属性来实现这样的效果,这个东西我们叫做动态组件. html: <h3>动态组件< ...

  8. Vue 动态修改data 值 并触发视图更新

    Vue 动态修改data 值 并触发视图更新 this.$set(obj, key, '') // Vue 动态修改或者添加data key 并触发视图更新

  9. vuejs切换视图同时保持状态

    vuejs切换视图同时保持状态 http://cn.vuejs.org/guide/components.html#动态组件 动态组件 多个组件可以使用同一个挂载点,然后动态地在它们之间切换.使用保留 ...

随机推荐

  1. 在Ubuntu内制作自己的VOC数据集

    一.VOC数据集的简介 PASCAL VOC为图像的识别和分类提供了一整套标准化的优秀数据集,基本上就是目标检测数据集的模板.现在有VOC2007,VOC2012.主要有20个类.而现在主要的模型评估 ...

  2. SQL Server INSET/UPDATE/DELETE的执行计划

    DML操作符包括增删改查等操作方式. insert into Person.Address (AddressLine1, AddressLine2, City, StateProvinceID, Po ...

  3. thinkphp5.0和thinkphp3.2的区别不同之处

    先看目录结构: thinkphp 5.0的目录结构, 文档:https://www.kancloud.cn/manual/thinkphp5/118008 project 应用部署目录 ├─appli ...

  4. NetCore 生成RSA公私钥对,公钥加密私钥解密,私钥加密公钥解密

    using Newtonsoft.Json; using Org.BouncyCastle.Crypto; using Org.BouncyCastle.Crypto.Encodings; using ...

  5. HashMap、HashTable与ConcurrentHashMap区别

    线程不安全的HashMap 在多线程环境下,使用HashMap进行put操作会引起死循环,导致CPU利用率接近100%,所以在并发情况下不能使用HashMap.例如,执行如下代码会引起死循环. fin ...

  6. Windows无法自动将IP协议堆栈绑定到网络适配器 的解决办法

    实验室的台式机在升级驱动后上不了网了,有线网卡驱动卸载后重装了,还是不行,通过Windows诊断发现“Windows 无法自动将 IP 协议堆栈绑定到网络适配器的解决办法”. 解决办法: 打开“控制面 ...

  7. ionic2+中修改minSdkVersion的方法

    具体方法很简单,直接在config.xml中找到下面这一行 <preference name="android-minSdkVersion" value="17&q ...

  8. net core体系-web应用程序-4asp.net core2.0 项目实战(1)-9项目各种全局帮助类

    本文目录 1.  前沿2.CacheHelper基于Microsoft.Extensions.Caching.Memory封装3.XmlHelper快速操作xml文档4.SerializationHe ...

  9. jQuery Validate自定义错误信息,自定义方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 51Nod1253 Kundu and Tree 容斥原理

    原文链接https://www.cnblogs.com/zhouzhendong/p/51Nod1253.html 题目传送门 - 51Nod1253 题意 树包含 N 个点和 N-1 条边.树的边有 ...