vue實(shí)現(xiàn)動(dòng)態(tài)監(jiān)測(cè)元素高度
更新時(shí)間：2023年10月21日 10:33:13 作者：并非
這篇文章主要介紹了vue實(shí)現(xiàn)動(dòng)態(tài)監(jiān)測(cè)元素高度方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue動(dòng)態(tài)監(jiān)測(cè)元素高度
在 Vue 中，你可以使用 Vue 的計(jì)算屬性和偵聽(tīng)器來(lái)動(dòng)態(tài)監(jiān)測(cè)元素的高度。
首先：
你需要在計(jì)算屬性中定義一個(gè)方法來(lái)獲取元素的高度，然后在偵聽(tīng)器中監(jiān)測(cè)元素的高度是否發(fā)生變化。
例如：
computed: {
elementHeight() {
return this.$refs.myElement.offsetHeight
}
},
watch: {
elementHeight(newHeight, oldHeight) {
// 當(dāng)元素的高度發(fā)生變化時(shí)，這里的代碼會(huì)被執(zhí)行
}
}這樣，你就可以在元素的高度發(fā)生變化時(shí)執(zhí)行相應(yīng)的代碼了。
vue動(dòng)態(tài)設(shè)置元素的高度
1. 添加樣式綁定
<div class="container" :style="{height: scrollerHeight}">
</div>2. 添加屬性計(jì)算
computed: {
// 滾動(dòng)區(qū)高度
scrollerHeight: function() {
return (window.innerHeight - 50) + 'px'; //自定義高度需求
}
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue自定義指令添加跟隨鼠標(biāo)光標(biāo)提示框v-tooltip方式
這篇文章主要介紹了vue自定義指令添加跟隨鼠標(biāo)光標(biāo)提示框v-tooltip方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue中$event使用之獲取當(dāng)前元素及相關(guān)元素
這篇文章主要介紹了vue中$event使用之獲取當(dāng)前元素及相關(guān)元素,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了使用Vue.js 和Chart.js制作絢麗多彩的圖表，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了vue router 路由跳轉(zhuǎn)方法概述,使用到Vue的項(xiàng)目，我們最常見(jiàn)使用的就是Vue配套的Vue Router庫(kù)，本文結(jié)合示例代碼給大家詳細(xì)講解，需要的朋友可以參考下2022-12-12
vue項(xiàng)目中路徑使用@和~的區(qū)別及說(shuō)明
這篇文章主要介紹了vue項(xiàng)目中路徑使用@和~的區(qū)別及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了理順8個(gè)版本vue的區(qū)別(小結(jié))，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要為大家介紹了Vue.js中安裝一個(gè)路由器demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
Vue2 element 表頭查詢(xún)功能實(shí)現(xiàn)代碼
本文介紹Vue2中Element UI表格自定義表頭及查詢(xún)功能實(shí)現(xiàn),需通過(guò)slot-scope綁定數(shù)據(jù),注意Vue2.6+版本改用#header語(yǔ)法,并提供示例代碼說(shuō)明,感興趣的朋友一起看看吧2025-07-07
這篇文章主要介紹了關(guān)于vue中的rules表單驗(yàn)證(常用)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
在Vue中通過(guò)Mustache模板引擎將data中的文本數(shù)據(jù)插入到HTML中,下面這篇文章主要給大家介紹了關(guān)于Vue中Mustache模板引擎插值語(yǔ)法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12