组件具有以下绑定:
<div
class="columns dropdowns"
:style="{
height: `${dropdownsgridheight}px`,
}"
>
这个高度是根据下拉次数计算出来的。 在手机屏幕上，它显示得很差。 所以当屏幕高度小于812px时，我需要移除此样式绑定。 如何在vue.js中正确地进行呢？
请尝试以下操作:
<div
class="columns dropdowns"
:style="finalHeight"
></div>
在您的组件中:
data() {
return {
finalHeight: ''
}
},
created() {
window.addEventListener("resize", this.myEventHandler);
},
destroyed() {
window.removeEventListener("resize", this.myEventHandler);
},
methods: {
myEventHandler() {
if(window.innerHeight > 812) {
this.finalHeight = {
"height": this.dropdownsgridheight + 'px'
}
}
else {
this.finalHeight = '15px'
}
},
},
computed: {
dropdownsgridheight () {
return '50'
}
},
mounted() {
this.myEventHandler()
}
下面是一个示例:https://jsfiddle.net/nanif/yvw2h5pe/1/
