今天开发对话框时遇到了文字需要动态判断是否展示的问题,采用在对话框中包裹了不同的div进行实现
<div v-if="totalBalance != 0"> <label>代金券 <label>{{totalBalance}}</label> 元( <label v-if="ECardBalance != 0">E卡 <label{{ECardBalance}}</label> 元</label> <label v-if="GiveCardBalance != 0 && ECardBalance != 0"> + </label> <label v-if="GiveCardBalance != 0">赠券 <label>{{GiveCardBalance}}</label> 元</label> )</label> </div>
下面为显示效果:
可以发现label包裹的标签产生了上下偏移效果。对比浏览器样式表,发现vertical-align属性与label标签本身的margin-bottom冲突导致的,将label标签声明class添加以下style解决问题:
vertical-align: baseline ;
后续会看看有没有其他办法优化label嵌套问题或解决css样式问题。