Heim Web-Frontend View.js So legen Sie die Elementhöhe in vue.js dynamisch fest

So legen Sie die Elementhöhe in vue.js dynamisch fest

Oct 09, 2021 pm 05:42 PM
vue.js 元素 高度

vue.js-Methode zum dynamischen Festlegen der Elementhöhe: [<div :style="{width: divWidth, height: divHeight}"></div>data() {//Storage data}].

So legen Sie die Elementhöhe in vue.js dynamisch fest

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

Keine Worte mehr, gehen Sie einfach zum Code:

vue-Code:

<div :style="{width: divWidth, height: divHeight}"></div>
Nach dem Login kopieren

Daten:

data() {
    //这里存放数据
    return {
        divHeight:0,
        divWidth:0
    }
},
Nach dem Login kopieren

erstellte Methodenzuweisung

created(){
    let divWidth = document.body.clientWidth+"px";
    let divHeight = document.body.clientHeight-130+"px";
    this.divWidth = divWidth
    this.divHeight = divHeight
},
Nach dem Login kopieren

Empfohlenes Lernen: php-Schulung

Das obige ist der detaillierte Inhalt vonSo legen Sie die Elementhöhe 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)
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Chat -Befehle und wie man sie benutzt
1 Monate 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)

Wie entferne ich das Höhenattribut eines Elements mit jQuery? Wie entferne ich das Höhenattribut eines Elements mit jQuery? Feb 28, 2024 am 08:39 AM

Wie entferne ich das Höhenattribut eines Elements mit jQuery? Bei der Front-End-Entwicklung müssen wir häufig die Höhenattribute von Elementen manipulieren. Manchmal müssen wir möglicherweise die Höhe eines Elements dynamisch ändern, und manchmal müssen wir das Höhenattribut eines Elements entfernen. In diesem Artikel wird erläutert, wie Sie mit jQuery das Höhenattribut eines Elements entfernen, und es werden spezifische Codebeispiele bereitgestellt. Bevor wir jQuery zum Betreiben des Höhenattributs verwenden, müssen wir zunächst das Höhenattribut in CSS verstehen. Das Höhenattribut wird verwendet, um die Höhe eines Elements festzulegen

Wie ändere ich die Höhe des br-Tags? Wie ändere ich die Höhe des br-Tags? Sep 11, 2023 pm 05:29 PM

Tags sind ein häufig verwendetes HTML-Element, mit dem Zeilenumbrüche in Webinhalte eingefügt werden. Manchmal wird jedoch die bereits vorhandene Höhe der Zeilenunterbrechung als unzureichend erachtet und die Lücken zwischen aufeinanderfolgenden Zeilen schriftlichen Materials müssen vergrößert werden. In dieser Diskussion werden wir verschiedene Möglichkeiten untersuchen, die Höhe einer Beschriftung zu ändern, einschließlich der Verwendung der CSS-Eigenschaft „line-height“ und des Hinzufügens von Hilfselementen für den Zeilenumbruch. Unabhängig davon, ob Sie ein junger oder ein erfahrener Webentwickler sind, vermittelt Ihnen dieses Handbuch ein umfassendes Verständnis dafür, wie Sie die Höhe von Beschriftungen im Webdesign anpassen. Methoden Wir werden zwei verschiedene Methoden sehen, um die Höhe des br-Tags sichtbar zu ändern. Sie lauten wie folgt: Verwenden Sie die CSSline-height-Eigenschaft, um zusätzliche Zeilenumbrüche hinzuzufügen. Methode 1: Verwenden von CSSline-

C++-Programm: Fügen Sie einem Array ein Element hinzu C++-Programm: Fügen Sie einem Array ein Element hinzu Aug 25, 2023 pm 10:29 PM

Ein Array ist eine lineare sequentielle Datenstruktur, die dazu dient, homogene Daten an zusammenhängenden Speicherorten zu speichern. Wie andere Datenstrukturen müssen Arrays in der Lage sein, Elemente auf effiziente Weise einzufügen, zu löschen, zu durchlaufen und zu aktualisieren. In C++ sind unsere Arrays statisch. C++ bietet auch einige dynamische Array-Strukturen. Bei einem statischen Array können Z-Elemente im Array gespeichert werden. Bisher haben wir n Elemente. In diesem Artikel erfahren Sie, wie Sie in C++ Elemente am Ende eines Arrays einfügen (auch als anhängende Elemente bezeichnet). Verstehen Sie das Konzept anhand von Beispielen. Die Verwendung des Schlüsselworts „this“ ist wie folgt: GivenarrayA=[10,14,65,85,96,12,35,74,69]Afterin

Was sind in JavaFX die verschiedenen Pfadelemente? Was sind in JavaFX die verschiedenen Pfadelemente? Aug 28, 2023 pm 12:53 PM

Das Paket javafx.scene.shape stellt einige Klassen bereit, mit denen Sie verschiedene 2D-Formen zeichnen können. Dies sind jedoch nur primitive Formen wie Linien, Kreise, Polygone und Ellipsen usw. Wenn Sie also komplexe benutzerdefinierte Formen zeichnen möchten, benötigen Sie um die Path-Klasse zu verwenden. Path-Klasse Path-Klasse Mit diesem geometrischen Umriss, der eine Form darstellt, können Sie benutzerdefinierte Pfade zeichnen. Zum Zeichnen benutzerdefinierter Pfade stellt JavaFX verschiedene Pfadelemente bereit, die alle als Klassen im Paket javafx.scene.shape verfügbar sind. LineTo – Diese Klasse repräsentiert die Pfadelementlinie. Es hilft Ihnen, eine gerade Linie von den aktuellen Koordinaten zu den angegebenen (neuen) Koordinaten zu zeichnen. HlineTo – Dies ist die Tabelle

CSS-Übergangseffekt: So erzielen Sie den Gleiteffekt von Elementen CSS-Übergangseffekt: So erzielen Sie den Gleiteffekt von Elementen Nov 21, 2023 pm 01:16 PM

CSS-Übergangseffekt: So erzielen Sie den Gleiteffekt von Elementen Einführung: Im Webdesign kann der dynamische Effekt von Elementen das Benutzererlebnis verbessern, wobei der Gleiteffekt ein häufiger und beliebter Übergangseffekt ist. Durch die Übergangseigenschaft von CSS können wir leicht den gleitenden Animationseffekt von Elementen erzielen. In diesem Artikel wird erläutert, wie Sie mithilfe von CSS-Übergangseigenschaften den Gleiteffekt von Elementen erzielen, und es werden spezifische Codebeispiele bereitgestellt, um den Lesern ein besseres Verständnis und eine bessere Anwendung zu ermöglichen. 1. Einführung in den CSS-Übergangsattributübergang CSS-Übergangsattributtra

CSS-Transformation: So erzielen Sie den Rotationseffekt von Elementen CSS-Transformation: So erzielen Sie den Rotationseffekt von Elementen Nov 21, 2023 pm 06:36 PM

CSS-Transformation: Um den Rotationseffekt von Elementen zu erzielen, sind spezifische Codebeispiele erforderlich. Im Webdesign sind Animationseffekte eine der wichtigen Möglichkeiten, die Benutzererfahrung zu verbessern und die Aufmerksamkeit des Benutzers zu erregen, und Rotationsanimationen sind eine der klassischeren Methoden. In CSS können Sie das Attribut „transform“ verwenden, um verschiedene Verformungseffekte von Elementen zu erzielen, einschließlich Rotation. In diesem Artikel wird detailliert beschrieben, wie Sie mithilfe der CSS-Transformation den Rotationseffekt von Elementen erzielen, und es werden spezifische Codebeispiele bereitgestellt. 1. Verwendung von CSSs „transf

Welche Elemente werden von HTML5 nicht unterstützt? Welche Elemente werden von HTML5 nicht unterstützt? Aug 11, 2023 pm 01:25 PM

Elemente, die HTML5 nicht unterstützt, sind rein ausdrucksstarke Elemente, rahmenbasierte Elemente, Anwendungselemente, austauschbare Elemente und alte Formularelemente. Ausführliche Einführung: 1. Rein ausdrucksstarke Elemente wie Schriftart, Mitte, S, U usw. Diese Elemente werden normalerweise zur Steuerung des Textstils und -layouts verwendet. 2. Rahmenbasierte Elemente wie Rahmen, Frameset und Noframes Elemente werden in der Vergangenheit zum Erstellen von Webseitenlayouts und geteilten Fenstern verwendet. 3. Anwendungsbezogene Elemente wie Applet, Isinde usw.

So implementieren Sie ein Layout mit einem festen Navigationsmenü mithilfe von HTML und CSS So implementieren Sie ein Layout mit einem festen Navigationsmenü mithilfe von HTML und CSS Oct 26, 2023 am 11:02 AM

So implementieren Sie mithilfe von HTML und CSS ein Layout mit einem festen Navigationsmenü. Im modernen Webdesign gehören feste Navigationsmenüs zu den häufigsten Layouts. Dadurch kann das Navigationsmenü immer oben oder am Rand der Seite angezeigt werden, sodass Benutzer bequem durch Webinhalte navigieren können. In diesem Artikel wird erläutert, wie Sie mithilfe von HTML und CSS ein Layout mit einem festen Navigationsmenü implementieren, und es werden spezifische Codebeispiele bereitgestellt. Zunächst müssen Sie eine HTML-Struktur erstellen, um den Inhalt der Webseite und das Navigationsmenü darzustellen. Hier ist ein einfaches Beispiel

See all articles