码迷,mamicode.com
首页 > 其他好文 > 详细

vue动态切换视图

时间:2018-05-31 02:38:51      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:one   keep   name   import   export   一个   method   life   als   

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动态切换视图

标签:one   keep   name   import   export   一个   method   life   als   

原文地址:https://www.cnblogs.com/qiyc/p/9114398.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!