So legen Sie die Breite in vue.js dynamisch fest

Vue.js-Methode zum dynamischen Festlegen der Breite: 1. Stilbindung hinzufügen 2. Attributberechnung hinzufügen, z. B. [berechnet: {scrollerHeight: function() {return (window.innerHeight - 46 - 50)...].

Die Betriebsumgebung dieses Artikels: Windows10-System, vue.js 2.9, Thinkpad T480-Computer.

Im eigentlichen Entwicklungsprozess verwenden wir häufig dynamisch berechnete Stile wie Breite, Höhe usw., insbesondere bei der Entwicklung des Backend-Managementsystems.

Anforderungsszenario:

Ermitteln Sie die aktuelle Bildschirmhöhe des Mobiltelefons und legen Sie den scrollbaren Bereichsbereich des Container-Div fest.

Spezifische Implementierung:

1. Stilbindung hinzufügen

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

2. Attributberechnung hinzufügen. Denken Sie daran, scrollerHeight muss nicht in den Daten deklariert werden.

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

Empfohlenes Lernen:

php-Schulung

Das obige ist der detaillierte Inhalt vonSo legen Sie die Breite in vue.js dynamisch fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!