vue窗口變化onresize詳解
更新時(shí)間:2024年08月10日 17:12:13 作者:xx_小熊
這篇文章主要介紹了vue窗口變化onresize,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue窗口變化onresize
div大小隨著窗口變化而變化
- 效果:
來看代碼
<template> <div> <div class="mask"> <div class="center" :style="{width:centerWidth*0.2+'px',height:centerHeight*0.5+'px'}"> <p>width:{{centerWidth}}</p> <p>height:{{centerHeight}}</p> </div> </div> </div> </template>
<script> export default { data() { return { centerWidth: document.documentElement.clientWidth, centerHeight: document.documentElement.clientHeight }; }, mounted() { window.onresize = () => { this.centerWidth = document.documentElement.clientWidth; this.centerHeight = document.documentElement.clientHeight; }; } }; </script>
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vuejs使用FormData實(shí)現(xiàn)ajax上傳圖片文件
本篇文章主要介紹了vuejs使用FormData實(shí)現(xiàn)ajax上傳圖片文件,具有一定的參考價(jià)值,有興趣的可以了解一下2017-08-08vue中props賦值給data出現(xiàn)的問題及解決
這篇文章主要介紹了vue中props賦值給data出現(xiàn)的問題及解決,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10Vee-validate 父組件獲取子組件表單校驗(yàn)結(jié)果的實(shí)例代碼
vee-validate 是為 Vue.js 量身打造的表單校驗(yàn)框架,允許您校驗(yàn)輸入的內(nèi)容并顯示對應(yīng)的錯(cuò)誤提示信息。這篇文章主要介紹了Vee-validate 父組件獲取子組件表單校驗(yàn)結(jié)果 ,需要的朋友可以參考下2019-05-05在vue中動(dòng)態(tài)修改css其中一個(gè)屬性值操作
這篇文章主要介紹了在vue中動(dòng)態(tài)修改css其中一個(gè)屬性值操作,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-12-12mpvue中使用flyjs全局?jǐn)r截的實(shí)現(xiàn)代碼
這篇文章主要介紹了mpvue中使用flyjs全局?jǐn)r截的實(shí)現(xiàn)代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09VUE在for循環(huán)里面根據(jù)內(nèi)容值動(dòng)態(tài)的加入class值的方法
這篇文章主要介紹了VUE在for循環(huán)里面根據(jù)內(nèi)容值動(dòng)態(tài)的加入class值的方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-08-08Vue 應(yīng)用中結(jié)合vux使用微信 jssdk的方法
今天小編就為大家分享一篇Vue 應(yīng)用中結(jié)合vux使用微信 jssdk的方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08