vue.js如何動態設定寬度

vue.js動態設定寬度的方法：1、新增樣式綁定；2、新增屬性計算，例如【computed: {scrollerHeight: function() {return (window.innerHeight - 46 - 50). ..】。

本文操作環境：windows10系統、vue.js 2.9、thinkpad t480電腦。

在實際開發過程中，我們會經常使用到動態運算的樣式，例如寬度、高度等，特別是在開發後台管理系統的時候。

需求場景：

取得目前手機螢幕高度，設定container div的可捲動區域範圍。

具體實作：

1、新增樣式綁定

<div class="container" :style="{height: scrollerHeight}">
</div>

2、新增屬性計算

#在computed裡加入屬性計算。記住 scrollerHeight 不需在data進行宣告。

computed: {
    // 滚动区高度
    // (业务需求：手机屏幕高度减去头部标题和底部tabbar的高度，当然这2个高度也是可以动态获取的)
    scrollerHeight: function() {
      return (window.innerHeight - 46 - 50) + 'px';
    }
  }

推薦學習：php訓練

#

以上是vue.js如何動態設定寬度的詳細內容。更多資訊請關注PHP中文網其他相關文章！