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. python unittest套件,修改为失败重新执行

    #套件,修改为失败重新执行 import time import unittest from unittest.suite import _isnotsuite class Suit(unittest ...

  2. 函数wait和waitpid

    函数wait 一个进程在终止时会关闭所有文件描述符,释放在用户空间释放的内存,但它的PCB还保留着,内核在其中保存一些信息:如果是正常终止时则保存着退出状态,如果是异常终止则保存着导致该进程终止的信号 ...

  3. Android常用框架和控件使用

    Router框架 https://github.com/iqiyi/Andromeda/blob/master/CHINESE_README.md https://github.com/alibaba ...

  4. 什么是redis的雪崩和穿透

    缓存雪崩 如何应对缓存雪崩 首先要保证redis的高可用,可以使用redis cluster,开启redis持久化,redis之前要使用本地缓存,请求先走本地缓存,没找到再走redis 如果还是出现了 ...

  5. jQuery 核心 - noConflict() 方法[避免冲突的方法]

    定义和用法 noConflict() 方法让渡变量 $ 的 jQuery 控制权. 语法 jQuery.noConflict([removeAll]) 参数描述removeAll布尔值.指示是否允许彻 ...

  6. CentOS 6.9 NFS安装和配置

    1.安装依赖包 yum install nfs-utils rpcbind -y 2.开机启动 chkconfig rpcbind on chkconfig nfs on 3.创建一个共享目录和加权限 ...

  7. win7自带截屏便签 打开命令

    win7自带截屏 1.win+r 2.SnippingTool.exe    打开 便签 1.win+r 2.StikyNot.exe    打开 查本机ip 1.win+r 2.cmd 3.ipco ...

  8. Vim的合并行操作

    日常常用到多行合并的功能,记录如下: 第一种, 多行合并成一行,即: AAAAABBBBBCCCCC 合并为:AAAAA BBBBB CCCCC 方法1: normal状态下 3J 其中的3是范围,可 ...

  9. kafka工作流程| 命令行操作

    1.  概述 数据层:结构化数据+非结构化数据+日志信息(大部分为结构化) 传输层:flume(采集日志--->存储性框架(如HDFS.kafka.Hive.Hbase))+sqoop(关系型数 ...

  10. sql查询一个字段不同值并返回

    sql SELECT COUNT(字段),分组字段,SUM(字段),SUM(字段) FROM 表 GROUP BY 分组字段 java EntityWrapper<ProjectEntity&g ...