Heim Web-Frontend View.js So legen Sie die Breite in vue.js dynamisch fest

So legen Sie die Breite in vue.js dynamisch fest

Oct 11, 2021 pm 03:00 PM
vue.js Breite

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)...].

So legen Sie die Breite in vue.js dynamisch fest

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>
Nach dem Login kopieren

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) + &#39;px&#39;;
    }
  }
Nach dem Login kopieren

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!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Lassen Sie uns ausführlich über reactive() in vue3 sprechen Lassen Sie uns ausführlich über reactive() in vue3 sprechen Jan 06, 2023 pm 09:21 PM

Vorwort: Bei der Entwicklung von vue3 bietet reactive eine Methode zur Implementierung reaktionsfähiger Daten. Dies ist eine häufig verwendete API in der täglichen Entwicklung. In diesem Artikel wird der Autor seinen internen Betriebsmechanismus untersuchen.

Praktischer Kampf: Entwickeln Sie ein Plug-In in vscode, das Vue-Dateien unterstützt, um zu Definitionen zu springen Praktischer Kampf: Entwickeln Sie ein Plug-In in vscode, das Vue-Dateien unterstützt, um zu Definitionen zu springen Nov 16, 2022 pm 08:43 PM

vscode selbst unterstützt Vue-Dateikomponenten, um zu Definitionen zu springen, aber die Unterstützung ist sehr schwach. Unter der Konfiguration von vue-cli können wir viele flexible Verwendungen schreiben, die unsere Produktionseffizienz verbessern können. Es sind jedoch diese flexiblen Schreibmethoden, die verhindern, dass die von vscode selbst bereitgestellten Funktionen das Springen zu Dateidefinitionen unterstützen. Um mit diesen flexiblen Schreibmethoden kompatibel zu sein und die Arbeitseffizienz zu verbessern, habe ich ein vscode-Plug-in geschrieben, das Vue-Dateien unterstützt, um zu Definitionen zu springen.

Detaillierte grafische Erklärung zur Integration des Ace-Code-Editors in ein Vue-Projekt Detaillierte grafische Erklärung zur Integration des Ace-Code-Editors in ein Vue-Projekt Apr 24, 2023 am 10:52 AM

Ace ist ein in JavaScript geschriebener einbettbarer Code-Editor. Es entspricht der Funktionalität und Leistung nativer Editoren wie Sublime, Vim und TextMate. Es kann problemlos in jede Webseite und JavaScript-Anwendung eingebettet werden. Ace wird als Haupteditor für die Cloud9-IDE gepflegt und ist der Nachfolger des Mozilla Skywriter (Bespin)-Projekts.

Erfahren Sie, wie Sie Unit-Tests in Vue3 schreiben Erfahren Sie, wie Sie Unit-Tests in Vue3 schreiben Apr 25, 2023 pm 07:41 PM

Vue.js ist heute ein sehr beliebtes Framework in der Front-End-Entwicklung. Da sich Vue.js ständig weiterentwickelt, werden Unit-Tests immer wichtiger. Heute untersuchen wir, wie man Unit-Tests in Vue.js 3 schreibt, und stellen einige Best Practices sowie häufige Probleme und Lösungen vor.

Was ist der Unterschied zwischen Komponentisierung und Modularisierung in Vue? Was ist der Unterschied zwischen Komponentisierung und Modularisierung in Vue? Dec 15, 2022 pm 12:54 PM

Der Unterschied zwischen Komponentisierung und Modularisierung: Die Modularisierung ist aus Sicht der Codelogik unterteilt. Sie erleichtert die Entwicklung auf Codeebene und stellt sicher, dass die Funktionen jedes Funktionsmoduls konsistent sind. Die Komponentisierung ist die Planung aus der Perspektive der UI-Schnittstelle; die Komponentisierung des Frontends erleichtert die Wiederverwendung von UI-Komponenten.

Eine kurze Analyse zum Umgang mit Ausnahmen in dynamischen Vue3-Komponenten Eine kurze Analyse zum Umgang mit Ausnahmen in dynamischen Vue3-Komponenten Dec 02, 2022 pm 09:11 PM

Wie gehe ich mit Ausnahmen in dynamischen Vue3-Komponenten um? Im folgenden Artikel geht es um die Ausnahmebehandlungsmethoden für dynamische Vue3-Komponenten. Ich hoffe, dass er für alle hilfreich ist.

Ausführliche Diskussion darüber, wie Vite .env-Dateien analysiert Ausführliche Diskussion darüber, wie Vite .env-Dateien analysiert Jan 24, 2023 am 05:30 AM

Wenn wir das Vue-Framework zum Entwickeln von Front-End-Projekten verwenden, stellen wir bei der Bereitstellung mehrere Umgebungen bereit. Oft sind die von Entwicklungs-, Test- und Online-Umgebungen aufgerufenen Schnittstellendomänen unterschiedlich. Wie können wir die Unterscheidung treffen? Dabei werden Umgebungsvariablen und Muster verwendet.

Analysieren Sie das Prinzip der Implementierung der Kompositions-API durch Vue2 Analysieren Sie das Prinzip der Implementierung der Kompositions-API durch Vue2 Jan 13, 2023 am 08:30 AM

Seit der Veröffentlichung von Vue3 ist die Wortkompositions-API in das Blickfeld der Vue-Schreibenden gerückt. Ich glaube, jeder hat aufgrund der Veröffentlichung von @ immer gehört, wie viel besser die Kompositions-API ist als die vorherige Options-API. vue/composition-api-Plug-in, Vue2-Studenten können ebenfalls in den Bus einsteigen. Als Nächstes werden wir hauptsächlich Responsive Ref und Reactive verwenden, um eine eingehende Analyse durchzuführen, wie dieses Plug-In dies erreicht.

See all articles