I’ve been asked this question in interviews recently, three times in four interviews, what do you know about hiding elements? I hadn’t prepared a question like that before. I only had one in mindv-if/v-showThere,display:noneAlthough the interviewer also gave positive feedback, he was obviously not satisfied and kept asking me if I knew another way

In our daily development, Vue and other frameworks have corresponding V-if/V-show commands available, and few of them need to be handwritten. So take you to review this piece of knowledge, I can think of a way to say, welcome to add.

display:none

A classic problem in VUE is the difference between V-if and V-show, which involves the use of display: None. V-if directly adds and deletes DOM to achieve the effect of show and hide, while V-show achieves the effect of show and hide by setting the display property of CSS to None.

Since vUE already uses this approach, it should be a good one to use.

visibility:hidden

For those who may not be aware of the Visibility property, it can show and hide elements without changing the layout of the document. This element can also hide rows or columns in

.

Its values are:

Visible elements display normally.

Hidden Hides the element, but the layout of other elements does not change, which is equivalent to making the element transparent. Note that if you set the child element to visibility:visible, the child element will still be visible.

collapse

  • Used for<table>Rows, columns, column groups, and row groups hide rows or columns of the table and do not take up any spacedisplay:noneEquivalent effect on rows/columns of tables). However, the size of other rows and columns is still calculated, just as if it were a cell in a collapsed row or column. This value allows quick deletion of rows or columns from the table without forcing a recalculation of the width and height of the entire table.
  • Folded elastic items are hidden and the space they will occupy is removed.
  • forXULElement, whose computed size is always zero, and other styles that affect size are usually ignored, although margins are still in effect.
  • For other elements, folding is the same as hiding

Visibility: Hidden will be able to achieve our effect.

opacity:0

Opacity is a new property added in CSS3 to set opacity. If opacity is set to 0, it has the same effect as hiding

transform:scale(0)

Transform is also a new property in CSS3, and its scale method is used to set the size of an element to increase or decrease. Opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity

z-index : – 9999

The z-index property can be hidden by setting the hierarchy between elements, making it negative, and then setting itself to absolute positioning.

position : absolute;
z-index : -9999;
Copy the code

overflow : hidden

The Overflow property defines what to do when the content of an element is too large to fit into a block-level formatting context. It is a shorthand attribute for overflow-x and overflow-y.

Its values are:

  • Visible default value. Content is not pruned and can be rendered outside the element box.
  • Hidden If desired, the content will be cropped to fit the fill box. Scroll bars are not provided.
  • Scroll if necessary, the content will be clipped to fit the fill box. The browser displays a scroll bar, regardless of whether anything is actually clipped. (This prevents the scroll bar from appearing or disappearing when the content changes.) The printer may still print the overflow.
  • Auto depends on the user agent. If the content fits inside the fill box, it looks the same as the visible content, but a new block formatting context is still established. If the content overflows, the desktop browser provides a scroll bar.

After all we know, simply setting overflow: Hidden won’t work. You can set its width and height to 0, and then set overflow.

  width: 0;
  height: 0;
  overflow: hidden;
Copy the code

Some students may ask, if I set the width and height to 0, can I achieve the hidden effect? Of course not, unless you don’t have any content in your element. If you have content, you can’t hide it.

conclusion

There are probably a few ways I can think of to hide elements, but it’s not enough to know that they all work, but there are differences. The difference lies mainly in whether the space will be occupied.

Placeholder means that even though the element is hidden from view, it is essentially still there, so it will take its place.

After the actual test:

  • display:noneNot to take
  • opacity:0Not to take
  • visibility:hiddenplaceholder
  • transform:scale(0)placeholder
  • position:absolute; z-index:-9999Not to take
  • overflow:hiddenNot to take

The above is all I can think of about the front end of the hidden elements of the method, including the space does not occupy the question, I am through the actual test issued, these content is enough to deal with all relevant interviews, there is wrong place welcome exchange correction.