vue动态切换视图
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动态切换视图的更多相关文章
- 第八十七篇:Vue动态切换组件的展示和隐藏
好家伙, 1.什么是动态组件? 动态组件指的是动态切换组件的限制与隐藏 2.如何实现动态组件渲染 vue提供了一个内置的<component>组件,专门用来实现动态组件的渲染. 可以将其看 ...
- VUE 动态切换列表active样式
参考VUE官方文档样式绑定 https://cn.vuejs.org/v2/guide/class-and-style.html 需求是动态加载出来了所有菜单列表,点击其中一个li元素改变这个元素的背 ...
- vue动态切换组件
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>& ...
- vue动态切换页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 动态切换采用 CSplitterWnd 静态划分的视图布局(MFC)
标题读起来有些拗口,具体是什么情况,我们来看: 一.问题的提出 一个采用MFC开发的软件,其窗体视图采用CSplitterWnd三分,效果如下图所示: 图1 软件的默认视图布局 该MFC开发的软件功能 ...
- laravel4通过控制视图模板路劲来动态切换主题
通过控制视图模板路劲来动态切换主题 App::before(function($request) { $paths = Terminal::isMobile() ? array(__dir__.'/v ...
- Vue.js-----轻量高效的MVVM框架(十二、组件动态切换)
在写html的过程中,我们经常会遇到要写tabs的切换,类似于这样: 在vue中,我们也有自己的组件和属性来实现这样的效果,这个东西我们叫做动态组件. html: <h3>动态组件< ...
- Vue 动态修改data 值 并触发视图更新
Vue 动态修改data 值 并触发视图更新 this.$set(obj, key, '') // Vue 动态修改或者添加data key 并触发视图更新
- vuejs切换视图同时保持状态
vuejs切换视图同时保持状态 http://cn.vuejs.org/guide/components.html#动态组件 动态组件 多个组件可以使用同一个挂载点,然后动态地在它们之间切换.使用保留 ...
随机推荐
- python unittest套件,修改为失败重新执行
#套件,修改为失败重新执行 import time import unittest from unittest.suite import _isnotsuite class Suit(unittest ...
- 函数wait和waitpid
函数wait 一个进程在终止时会关闭所有文件描述符,释放在用户空间释放的内存,但它的PCB还保留着,内核在其中保存一些信息:如果是正常终止时则保存着退出状态,如果是异常终止则保存着导致该进程终止的信号 ...
- Android常用框架和控件使用
Router框架 https://github.com/iqiyi/Andromeda/blob/master/CHINESE_README.md https://github.com/alibaba ...
- 什么是redis的雪崩和穿透
缓存雪崩 如何应对缓存雪崩 首先要保证redis的高可用,可以使用redis cluster,开启redis持久化,redis之前要使用本地缓存,请求先走本地缓存,没找到再走redis 如果还是出现了 ...
- jQuery 核心 - noConflict() 方法[避免冲突的方法]
定义和用法 noConflict() 方法让渡变量 $ 的 jQuery 控制权. 语法 jQuery.noConflict([removeAll]) 参数描述removeAll布尔值.指示是否允许彻 ...
- CentOS 6.9 NFS安装和配置
1.安装依赖包 yum install nfs-utils rpcbind -y 2.开机启动 chkconfig rpcbind on chkconfig nfs on 3.创建一个共享目录和加权限 ...
- win7自带截屏便签 打开命令
win7自带截屏 1.win+r 2.SnippingTool.exe 打开 便签 1.win+r 2.StikyNot.exe 打开 查本机ip 1.win+r 2.cmd 3.ipco ...
- Vim的合并行操作
日常常用到多行合并的功能,记录如下: 第一种, 多行合并成一行,即: AAAAABBBBBCCCCC 合并为:AAAAA BBBBB CCCCC 方法1: normal状态下 3J 其中的3是范围,可 ...
- kafka工作流程| 命令行操作
1. 概述 数据层:结构化数据+非结构化数据+日志信息(大部分为结构化) 传输层:flume(采集日志--->存储性框架(如HDFS.kafka.Hive.Hbase))+sqoop(关系型数 ...
- sql查询一个字段不同值并返回
sql SELECT COUNT(字段),分组字段,SUM(字段),SUM(字段) FROM 表 GROUP BY 分组字段 java EntityWrapper<ProjectEntity&g ...