使用KeepAlive 进行性能优化 |
您所在的位置：网站首页 › vue做tab切换 › 使用KeepAlive 进行性能优化 |
使用KeepAlive 进行性能优化
|
类似于一个tab切换的作用 他可以缓存组件实例，即缓存组件的状态、数据和DOM结构，可以提高组件的性能 同样也是router路由切换可以使用 效果展示：
代码展示： // 高亮 {{item.name}} //点击切换下面 不同页面内容 // 切换的页面 // 同样也可以写 (路由切换) // import weiDicators from './weiDicators.vue'; //要切换到的第一个页面 import alreadyDicators from './alreadyDicators.vue'; //第二个页面 data() { return { istabChecked: 'weiDicators', //默认第一个页面 tabList: [ { name: "未录入", value: 'weiDicators' }, { name: "已录入", value: 'alreadyDicators' }, ], tabChecked: 0, //高亮 } methods：{ Btn(value,index){ //tab切换 this.istabChecked=value, this.tabChecked=index }, }， .colors{ color:red }根据需求进行切换即可（如有什么疑问可在下方留言） |
【本文地址】
今日新闻 |
推荐新闻 |