How to use v-show and v-if instructions in Vue.js
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!
