在Vue js中设置div的高度 [英] Set height of a div in vue js
问题描述
我正在使用 vue js .我想使用纯 javascript 根据另一个 div 高度设置一个 div.我面临的问题是我无法使用纯 Java 脚本设置高度.但我可以使用 jquery 设置它.任何人都可以帮我将此 jquery 更改为 javascript .给出了我正在使用的代码
Vue.nextTick(function () {var offsetHeight = document.getElementById('filterSection').offsetHeight;$(".searchResultSection").css("max-height",`calc(100% - ${offsetHeight}px)`);});
我需要将 jquery 部分更改为 java 脚本.
事实上,计算属性
(https://vuejs.org/v2/guide/computed.html#Computed-Properties) 是解决您问题的完美选择:
声明一个计算属性,他将返回 filterSectionHeight
出口默认{名称:应用程序",计算:{filterSectionHeight() {const filterSectionDOM = document.getElementById("filterSection");返回 filterSectionDOM ?filterSectionDOM.offsetHeight : 0;},}};
在你的组件(或 App 组件)中定义你的 div filterSection
和 searchResultsSection
,不要忘记 添加一个 :style
属性 处理模板中提供给 .searchResultsSection
的动态 max-height
<div class="searchResultsSection":style="{'最大高度':`calc(100% - ${filterSectionHeight}px)`}">
在你的 css 中将每个 div 的高度设置为 100%
#app {高度:600px;宽度:100%;}#filterSection {高度:100%;背景:rebeccapurple;//https://en.wikipedia.org/wiki/Eric_A._Meyer}.searchResultsSection{高度:100%;背景:rebeccapurple;不透明度:0.6;}
您可以在这里找到完整的演示 > https://codesandbox.io/s/1rkmwo1wq
I am using vue js . I want to set one div based on another div height, with pure javascript. the problem I am facing is I can't set the height using pure java script. but I can set it using jquery. can any one please help me to change this jquery to javascript . the code I am using is given
Vue.nextTick(function () {
var offsetHeight = document.getElementById('filterSection').offsetHeight;
$(".searchResultSection").css("max-height",`calc(100% - ${offsetHeight}px)`);
});
I need to change the jquery part into java script.
In fact, computed properties
(https://vuejs.org/v2/guide/computed.html#Computed-Properties) is the perfect option to solves your problem:
Declare a computed property who will return the filterSectionHeight
export default {
name: "App",
computed: {
filterSectionHeight() {
const filterSectionDOM = document.getElementById("filterSection");
return filterSectionDOM ? filterSectionDOM.offsetHeight : 0;
},
}
};
Define your div filterSection
and searchResultsSection
in your component (or App component), don't forget to add a :style
attribute who handle the dynamic max-height
provided to .searchResultsSection
in your template
<div id="filterSection"></div>
<div class="searchResultsSection"
:style="{
'max-height': `calc(100% - ${filterSectionHeight}px)`
}">
</div>
Set height of each div to 100% in your css
#app {
height: 600px;
width: 100%;
}
#filterSection {
height: 100%;
background: rebeccapurple; //https://en.wikipedia.org/wiki/Eric_A._Meyer
}
.searchResultsSection{
height: 100%;
background: rebeccapurple;
opacity: 0.6;
}
You will find a full demo here > https://codesandbox.io/s/1rkmwo1wq
这篇关于在Vue js中设置div的高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!