vue窗口變化onresize詳解
更新時間:2024年08月10日 17:12:13 作者:xx_小熊
這篇文章主要介紹了vue窗口變化onresize,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
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>
總結
以上為個人經驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
vuejs使用FormData實現(xiàn)ajax上傳圖片文件
本篇文章主要介紹了vuejs使用FormData實現(xiàn)ajax上傳圖片文件,具有一定的參考價值,有興趣的可以了解一下2017-08-08vue中props賦值給data出現(xiàn)的問題及解決
這篇文章主要介紹了vue中props賦值給data出現(xiàn)的問題及解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10Vee-validate 父組件獲取子組件表單校驗結果的實例代碼
vee-validate 是為 Vue.js 量身打造的表單校驗框架,允許您校驗輸入的內容并顯示對應的錯誤提示信息。這篇文章主要介紹了Vee-validate 父組件獲取子組件表單校驗結果 ,需要的朋友可以參考下2019-05-05VUE在for循環(huán)里面根據內容值動態(tài)的加入class值的方法
這篇文章主要介紹了VUE在for循環(huán)里面根據內容值動態(tài)的加入class值的方法,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-08-08