Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use the v-show and v-if instructions in Vue.js, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

I. v-show instruction

The v-show instruction can be used to dynamically control the display or hiding of DOM elements. V-show is followed by a judgment condition, and the syntax is as follows:

Vshow = "judge variable"

For example:

Vmurshow = "true", indicating that the DOM element is displayed.

Vmurshow = "false", which means that the DOM element is hidden.

Look at the following example:

V-show directive _ window.onload=function () {/ / build vue instance new Vue ({el: "# my", data: {flag:true,// Boolean imgList: ["img/banner1.jpg", "img/banner2.jpg" "img/banner3.jpg"]}, / / method methods: {}})}

Running effect:

Change the flag variable to false, as follows:

V-show directive _ window.onload=function () {/ / build vue instance new Vue ({el: "# my", data: {/ * flag:true,// Boolean * / flag:false / / Boolean imgList: ["img/banner1.jpg", "img/banner2.jpg", "img/banner3.jpg"]}, / / method methods: {}}

Running effect:

Only three will be shown here, but not the img element.

II. V-if instruction

The use of the v-if instruction is the same as that of the v-show instruction, which is used to control the display or hiding of DOM elements. The code example is as follows:

V-if directive _ window.onload=function () {/ / build vue instance new Vue ({el: "# my", data: {flag:true,// Boolean imgList: ["img/banner1.jpg", "img/banner2.jpg" "img/banner3.jpg"]}, / / method methods: {}})}

Running effect:

III. The difference between v-show and v-if

Both v-show and v-if can be used to control the display or hiding of DOM elements, so what's the difference between these two instructions?

The main difference between the v-show and v-if instructions is when you set the DOM element to hide:

The v-show directive sets the hide to add the css style-- display:none-- to the element, but the DOM element still exists

The v-if instruction sets the hide to delete the DOM element as a whole, and the DOM element no longer exists

Look at the following example:

V-show setting Hidden:

V-show directive _ window.onload=function () {/ / build vue instance new Vue ({el: "# my", data: {/ * flag:true,// Boolean * / flag:false / / Boolean imgList: ["img/banner1.jpg", "img/banner2.jpg", "img/banner3.jpg"]}, / / method methods: {}}

Check for elements:

As you can see from the generated HTML structure, the element whose index is not equal is hidden, but the CSS style: display:node is added, but the element still exists. Let's take a look at v-if.

V-if directive _ window.onload=function () {/ / build vue instance new Vue ({el: "# my", data: {flag:true,// Boolean imgList: ["img/banner1.jpg", "img/banner2.jpg" "img/banner3.jpg"]}, / / method methods: {}})}

Check for elements:

From the generated HTML structure, you can see that the element whose index is not equal to 1 is hidden. Here, the img element is deleted directly and does not take up a place.

More detailed differences: (learn from other people's blog content, blog address: / / www.yisu.com/article/240646.htm)

1. Means: v-if dynamically adds or removes DOM elements to the DOM tree; v-show controls visibility and concealment by setting the display style attribute of the DOM element

two。 Compilation process: v-if switching has a partial compilation / unloading process, during which internal event listeners and subcomponents are properly destroyed and rebuilt; v-show is simply based on css switching.

3. Compilation conditions: v-if is lazy, and if the initial condition is false, nothing is done; partial compilation is started only when the condition becomes true for the first time. Compilation is cached and then partially unloaded when switching); v-show is compiled under any condition (whether the first condition is true or not), then cached, and the DOM element is retained

4. Performance consumption: v-if has higher handover consumption; v-show has higher initial rendering consumption

5. Usage scenarios: v-if is suitable for operating conditions and is unlikely to change; v-show is suitable for frequent switching.

IV. V-else instruction

The v-else instruction does not require an expression, but there is a limitation: the previous sibling element must have a v-if or v-else-if instruction.

Usage: add "else blocks" to v-if or v-else-if.

Look at the following code:

Vue directive: v-if v-else num value: {{num}} Now you see me Now you don't / / instantiate Vue object var vm = new Vue ({/ / mount element el: "# app" Data: {num:Math.random ()}, methods: {}})

Browser running result:

You can see that the value of num is not greater than 5, so the value of the v-if expression is false, so the label where the v-else instruction is located is displayed.

5. V-else-if

V-else-if usage restrictions: the previous sibling element must have v-if or v-else-if.

Usage: v-else-if represents the "else-if" block of v-if, which can be called in a chain.

Look at the following code:

Vue instruction: v-if v-else A B C Not A/B/C / / instantiate the Vue object var vm = new Vue ({/ / mount element el: "# app" Data: {num:Math.random (), type:'B'}, methods: {}})

Browser running result:

The above is all the contents of the article "how to use v-show and v-if instructions in Vue.js". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.