您现在的位置是：主页 > news > 成都市住房和城乡建设厅网站/如何通过网络营销自己
成都市住房和城乡建设厅网站/如何通过网络营销自己
admin2025/5/6 3:38:14【news】
简介成都市住房和城乡建设厅网站,如何通过网络营销自己,只有虚拟主机可以做网站吗,网站开发应用价值动态组件 keep-alive在实现切换效果时，你会想保持在目标位置的状态，就是你在a选项看到第8行，切换到b选项后在切换到a选项里面还在第8行的位置。(1)创建两个组件 home.vue <template><div> Home</div></template> <…
成都市住房和城乡建设厅网站,如何通过网络营销自己,只有虚拟主机可以做网站吗,网站开发应用价值动态组件 keep-alive在实现切换效果时，你会想保持在目标位置的状态，就是你在a选项看到第8行，切换到b选项后在切换到a选项里面还在第8行的位置。(1)创建两个组件 home.vue <template><div> Home</div></template>
<…
动态组件 keep-alive
在实现切换效果时，你会想保持在目标位置的状态，就是你在a选项看到第8行，切换到b选项后在切换到a选项里面还在第8行的位置。
(1)创建两个组件
home.vue
<template><div> Home</div></template>
<script>
export default {name:"Home"
}
</script>news.vue
<template><div> News:{{ msg }}<button @clack="updateMsg">改变</button></div></template>
<script>
export default {name:"News",data(){return{msg:"我是初始化值"}},methods:{updateMsg(){this.msg = "我是改变了的值"}}
}
</script>
<style>
</style>（2）主页面引入home.vue 和 news.vue
<template><div> App<component :is="currentComponent"></component><button @click="chengeView">切换视图</button></div></template>
<script>
import Home from './home'
import News from './news'
export default {name:"App",data(){return{//默认值显示HomecurrentComponent:Home ,//定一个默认值进行取反flag:false}},compinents:{Home,News },methods:{chengeView(){if(this.flag){this.currentComponent = Homethis.flag = false}else{this.currentComponent = News this.flag = true}}}
}
</script>
<style>
</style>功能创建好后
1.点击切换视图到News
2.点击改变
3.到了我是改变了的值，在点击切换视图
4.到home，在点击切换视图
5.这时候发现到了我是初始化页面，不会回到我是改变了的值页面
这样会增加性能消耗，实现缓存效果，在加载组件的位置增加keep-alive，这样就不会增加性能的消耗，这就是动态组件keep-alive的作用。keep-alive缓存操作不仅可以用在component上，还可以用于路由上。
<template><div> App<keep-alive><component :is="currentComponent"></component></keep-alive><button @click="chengeView">切换视图</button></div></template>
<script>
import Home from './home'
import News from './news'
export default {name:"App",data(){return{//默认值显示HomecurrentComponent:Home ,//定一个默认值进行取反flag:false}},compinents:{Home,News },methods:{chengeView(){if(this.flag){this.currentComponent = Homethis.flag = false}else{this.currentComponent = News this.flag = true}}}
}
</script>
<style>
</style>
