vue 监听窗口变化对页面部分元素重新渲染操作
更新时间：2020年07月28日 08:45:11 作者：lwlcode
这篇文章主要介绍了vue 监听窗口变化对页面部分元素重新渲染操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
问题
在处理页面重新渲染时通常的做法是：
用vue-router重新路由到当前页面，页面是不进行刷新的
采用window.reload()，或者router.go(0)刷新时，整个浏览器进行了重新加载，闪烁，体验不好
使用 v-if 重新渲染部分组件或容器
需要重新渲染的内容
<div v-if="render"> ... </div>
vue 监听窗口大小发生改变
使用 window.addEventListener() 添加 resize 事件监听窗口变化
new Vue({
el: '#app',
data() {
return { render: true }
},
mounted() {
window.addEventListener('resize', this.reload)
},
beforeDestroy() {
window.removeEventListener('resize', this.reload)
},
methods: {
reload() {
// 重新渲染
this.render = false
this.$nextTick(() => {
this.render = true
})
}
}
})
补充知识：vue同一个路由,但参数发生变化，页面不刷新的问题（vue监听路由参数变化重新渲染页面）
我就废话不多说了，大家还是直接看代码吧~
watch: {
$route: function(newVal, oldVal) {
console.log(oldVal); //oldVa 上一次url
console.log(newVal); //newVal 这一次的url
if (newVal != oldVal) {
this.loading();//重新调用加载函数
}
}
}
以上这篇vue 监听窗口变化对页面部分元素重新渲染操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue常见的事件修饰符,在平时无论是面试还是学习工作中都会经常遇到的,本文就带你快速上手,需要的朋友可以参考下2023-03-03
Vue web前端三大主流框架之一,是一套用于构建用户界面的渐进式框架,下面这篇文章主要给大家介绍了关于Vue安装与配置教程的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-06-06
这篇文章主要为大家详细介绍了vue右键菜单的简单封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
本文主要介绍了vue中keep-alive多级路由缓存问题，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-12-12
在实际业务中，我们常用图表来做数据统计，数据展示，数据可视化等比较直观的方式来达到一目了然的数据查看，但在大屏开发过程中，常会因为适配不同屏幕而感到困扰，下面我们来解决一下这个不算难题的难题2022-11-11
这篇文章主要介绍了Vue.js动态添加、删除选题的实例代码,非常不错具有参考借鉴价值，需要的朋友可以参考下2016-09-09
在 Vue 3 中,.sync 修饰符已经被移除,在 Vue 2 中,.sync 修饰符是一个语法糖,用于简化子组件和父组件之间的双向数据绑定,那么本文将给大家介绍一下vue3中不支持.sync语法糖的解决方法,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了element-ui多选表格禁用某一行不被选择问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了vue如何通过id从列表页跳转到对应的详情页 ,需要的朋友可以参考下2018-05-05
Vue项目打包(build)时,自动打以时间命名的压缩包方式
这篇文章主要介绍了Vue项目打包(build)时,自动打以时间命名的压缩包方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
最新评论