vue 动态绑定height以及v-if、v-else的使用

Macdull2014

于 2019-09-03 18:07:00 发布

阅读量735

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/linjiangxian/p/11454628.html

版权

本文介绍了在前端开发中如何使用动态绑定的方式设置元素的高度，包括通过计算屏幕尺寸获得动态高度，以及使用v-if和v-else进行条件渲染的具体实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动态绑定height:

:style="{height: slideHeight+'rem'}"

slideHeight: 2

如果需要计算来得到高度，如:

<p :style="obj">111</p>

data:

winHei: screen.availHeight, //屏幕高度
winWid: screen.availWidth, //屏幕宽度
obj:{
    height : ''  
}

this.obj.height = winHei * 3 +'px';

v-if、v-else
例：

<div v-if="isShowSlide" class="shopSlideImg" style="height:2rem">
    <shop-slide :shopImgsList="shopImgsList"></shop-slide>
</div>
<div v-else="isShowSlide" class="shopSlideImg" style="height:0rem">
    <shop-slide :shopImgsList="shopImgsList"></shop-slide>
</div>

转载于:https://www.cnblogs.com/linjiangxian/p/11454628.html