在开发过程中,很多时候都会用到动态的计算的样式,比如宽度,高度。特别是开发后台管理系统。
那么首先你务必看Vue的官方文档。涉及到的基础知识有:
文档写的都是基础使用。那么在项目实战中如何使用,2步就能实现,下面提供一个参考方案:
需求场景:获取当前手机屏幕高度,设置container
div的可滚动区域范围。
1. 添加样式绑定
绑定高试样式
<div class="container" :style="{height: scrollerHeight}">
</div>
2. 添加属性计算
在computed
里添加属性计算。记住 scrollerHeight
不能在data
进行定义。computed
是啥?请看看 computed的使用
computed: {
// 滚动区高度
// (业务需求:手机屏幕高度减去头部标题和底部tabbar的高度,当然这2个高度也是可以动态获取的)
scrollerHeight: function() {
return (window.innerHeight - 46 - 50) + 'px';
}
}