vue监听窗口变化对页面部分元素重新渲染
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
网络错误பைடு நூலகம்03请刷新页面重试持续报错请尝试更换浏览器或网络环境
vue监 听 窗 口 变 化 对 页 面 部 分 元 素 重 新 渲 染
问题
在处理页面重新渲染时通常的做法是：
1. 用vue-router重新路由到当前页面，页面是不进行刷新的 2. 采用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监 听 窗 口 变 化 对 页 面 部 分 元 素 重 新 渲 染
问题
在处理页面重新渲染时通常的做法是：
1. 用vue-router重新路由到当前页面，页面是不进行刷新的 2. 采用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 }) } }
})