Home Web Front-end Vue.js How to dynamically set element height in vue.js

How to dynamically set element height in vue.js

Oct 09, 2021 pm 05:42 PM
vue.js element high

vue.js method to dynamically set element height: [<div :style="{width: divWidth, height: divHeight}"></div>data() {//Storing data} 】.

How to dynamically set element height in vue.js

The operating environment of this article: windows10 system, vue.js 2.9, thinkpad t480 computer.

Without further ado, let’s go directly to the code:

vue code:

<div :style="{width: divWidth, height: divHeight}"></div>
Copy after login

data data:

data() {
    //这里存放数据
    return {
        divHeight:0,
        divWidth:0
    }
},
Copy after login

created method assignment

created(){
    let divWidth = document.body.clientWidth+"px";
    let divHeight = document.body.clientHeight-130+"px";
    this.divWidth = divWidth
    this.divHeight = divHeight
},
Copy after login

Recommended learning: php training

The above is the detailed content of How to dynamically set element height in vue.js. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Chat Commands and How to Use Them
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to remove the height attribute of an element with jQuery? How to remove the height attribute of an element with jQuery? Feb 28, 2024 am 08:39 AM

How to remove the height attribute of an element with jQuery? In front-end development, we often encounter the need to manipulate the height attributes of elements. Sometimes, we may need to dynamically change the height of an element, and sometimes we need to remove the height attribute of an element. This article will introduce how to use jQuery to remove the height attribute of an element and provide specific code examples. Before using jQuery to operate the height attribute, we first need to understand the height attribute in CSS. The height attribute is used to set the height of an element

How to change the height of br tag? How to change the height of br tag? Sep 11, 2023 pm 05:29 PM

Tags are a commonly used HTML element used to add line breaks in web content. Sometimes, however, the pre-existing height of line discontinuity may be deemed insufficient and the gaps between consecutive lines of written material need to be increased. In this discussion, we'll explore various ways to modify the height of a label, including using the CSS line-height property and adding auxiliary line wrapping elements. Whether you are a junior or an experienced web developer, this manual will give you a comprehensive understanding of how to adjust the height of labels in web design. Methods We will see two different methods to visibly change the height of the br tag. They are as follows - Use CSSline-height property to add extra line breaks Method One: Using CSSline-

C++ program: add an element to an array C++ program: add an element to an array Aug 25, 2023 pm 10:29 PM

An array is a linear sequential data structure used to hold homogeneous data in contiguous memory locations. Like other data structures, arrays must have the ability to insert, delete, traverse, and update elements in some efficient way. In C++, our arrays are static. C++ also provides some dynamic array structures. For a static array, Z elements may be stored in the array. So far we have n elements. In this article, we will learn how to insert elements at the end of an array (also known as appending elements) in C++. Understand the concept through examples. The usage of ‘this’ keyword is as follows: GivenarrayA=[10,14,65,85,96,12,35,74,69]Afterin

In JavaFX, what are the different path elements? In JavaFX, what are the different path elements? Aug 28, 2023 pm 12:53 PM

The javafx.scene.shape package provides some classes with which you can draw various 2D shapes, but these are just primitive shapes like lines, circles, polygons and ellipses etc... So if you want to draw complex For custom shapes, you need to use the Path class. Path class Path class You can draw custom paths using this geometric outline that represents a shape. To draw custom paths, JavaFX provides various path elements, all of which are available as classes in the javafx.scene.shape package. LineTo - This class represents the path element line. It helps you draw a straight line from the current coordinates to the specified (new) coordinates. HlineTo - This is the table

CSS transformation: how to achieve the rotation effect of elements CSS transformation: how to achieve the rotation effect of elements Nov 21, 2023 pm 06:36 PM

CSS transformation: How to achieve the rotation effect of elements requires specific code examples. In web design, animation effects are one of the important ways to improve user experience and attract user attention, and rotation animation is one of the more classic ones. In CSS, you can use the "transform" attribute to achieve various deformation effects of elements, including rotation. This article will introduce in detail how to use CSS "transform" to achieve the rotation effect of elements, and provide specific code examples. 1. How to use CSS’s “transf

CSS transition effect: how to achieve the sliding effect of elements CSS transition effect: how to achieve the sliding effect of elements Nov 21, 2023 pm 01:16 PM

CSS transition effect: How to achieve the sliding effect of elements Introduction: In web design, the dynamic effect of elements can improve the user experience, among which the sliding effect is a common and popular transition effect. Through the transition property of CSS, we can easily achieve the sliding animation effect of elements. This article will introduce how to use CSS transition properties to achieve the sliding effect of elements, and provide specific code examples to help readers better understand and apply. 1. Introduction to CSS transition attribute transition CSS transition attribute tra

What elements are not supported by html5 What elements are not supported by html5 Aug 11, 2023 pm 01:25 PM

Elements that HTML5 does not support are purely expressive elements, frame-based elements, application elements, replaceable elements and old form elements. Detailed introduction: 1. Purely expressive elements, such as font, center, s, u, etc., these elements are usually used to control text style and layout; 2. Frame-based elements, such as frame, frameset and noframes, these elements are used in In the past, it was used to create web page layouts and split windows; 3. Application-related elements, such as applet, isinde, etc.

How to implement a layout with a fixed navigation menu using HTML and CSS How to implement a layout with a fixed navigation menu using HTML and CSS Oct 26, 2023 am 11:02 AM

How to use HTML and CSS to implement a layout with a fixed navigation menu. In modern web design, fixed navigation menus are one of the common layouts. It can keep the navigation menu always at the top or side of the page, allowing users to browse web content conveniently. This article will introduce how to use HTML and CSS to implement a layout with a fixed navigation menu, and provide specific code examples. First, you need to create an HTML structure to present the content of the web page and the navigation menu. Here is a simple example

See all articles