The difference in the way the front end implements hiding

First of all, hello, this is Sunsei! A front end pupil. Small Shenxi often used in the process of development of the hidden, the user’s needs also often require us to show and do not show; But there are so many ways to implement hiding in the front end which one should we choose? Children make choices, and the answer, of course, is…… All want to! Ha ha, “whole”.

Hidden way

You can hide an element in the following ways:

1. HTML element: hidden=”hidden”;
2. Set the CSS property to display: None, or limit: hidden;
3. Element. Element. Hide (); Display element. Element. The show ();
4. Vue of v – if/v – show;
5. Wx :if/wx:show;

Explanation of the hidden way

hidden=”hidden”

• Write on the HTML element

• Hiding the space to be occupied by the domain, that is, not deleting the document flow node, is equivalent to changing the transparency to 0.

  Written inside the HTML

  <h1 hidden="hidden"><span>Home page</span></h1>
  Copy the code

• Delete the statement hidden=”hidden” to achieve display

• The display in CSS overrides the hidden property in HTML

Display: none

• Write it in a CSS style

• Hide the space that does not occupy the domain, that is, delete the document flow node.

  Hidden elements don’t take up any space. That is, not only is the element hidden, but the space it used to occupy disappears from the page layout.

• Hiding deletes the document node, not the DOM node.

  Although disappeared in the page, but through the js to get the node, or will get; Just hide and disappear in the document flow (and in the page).

• Display There are various display modes

  Display: block // Display at block level

  Display: inline// Line-level display

Visibility: hidden

• Write it in a CSS style

• Hide the space to be occupied by the domain.

  Hidden elements still need to occupy the same space as before they were hidden. That is, the element is hidden, but it still affects the layout.

  It’s like setting transparency to 0, you can’t see it, but you know it’s there.

• Hiding does not remove dom nodes

• Only one visibility: visible; Can be

hide() show()

• Write it in JS
• Hide hide ()
  

  Element.hide () actually sets the display in the CSS to None

• Show show ()
  

  Element.show () actually sets the display in the CSS to a block

• Hide/show is equivalent to changing the value of the property of display.

v-if/wx:if

• Hide the space that does not occupy the domain
• The Boolean expression is hidden if true and displayed if false
  

  <div   v-if="{{true}}">    v-if</div>
  <view  wx:if="{{false}}">  wx:if</view>
  Copy the code

• Hide removes the DOM node, and display is added back
  

  Hidden means that the entire Dom structure and page cannot be found, which is equivalent to removing the element node completely.

v-show/wx:show

• Hide the space that does not occupy the domain
• The Boolean expression is hidden if true and displayed if false
• Hiding does not delete the DOM node and is equivalent to changing the value of the display property

conclusion

The last sentence

This is small Shen Xi’s own learning experience! If it is not right, it is also expected to be right. In fact, in the actual development process according to the need to choose the technology is the best shortcut oh, because you never know what the user is thinking, xi xi hope you do not want to be stingy with my advice. Toodles!