catalogue
1.4 manage reusable elements with key
1. v-if
The v-if instruction is used to render a piece of content conditionally. This content will only be rendered when the expression of the instruction returns the truth value.
<h1 v-if="awesome">Vue is awesome!</h1>
You can also add an else block with v-else:
<h1 v-if="awesome">Vue is awesome!</h1> <h1 v-else>Oh no 😢</h1>
1.1 template
Because v-if is an instruction, it must be added to an element. But what if you want to switch multiple elements? At this point, you can treat a < template > element as an invisible wrap element and use v-if on it. The final render will not contain the < template > element.
<template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template>
1.2 v-else
You can use the v-else instruction to represent the "else block" of v-if:
<div v-if="Math.random() > 0.5"> Now you see me </div> <div v-else> Now you don't </div>
The v-else element must follow the element with v-if or v-else-if, otherwise it will not be recognized.
1.3 v-else-if
The v-else element must follow the element with v-if or v-else-if, otherwise it will not be recognized.
<div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div>
Similar to v-else, v-else-if must also follow the element with v-if or v-else-if.
1.4 manage reusable elements with key
Vue renders elements from scratch as efficiently as possible, rather than reusing existing elements. In addition to making Vue very fast, there are other benefits. For example, if you allow users to switch between different login methods:
<template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username"> </template> <template v-else> <label>Email</label> <input placeholder="Enter your email address"> </template>
Then switching loginType in the above code will not clear what the user has entered. Because the two templates use the same element, < input > will not be replaced -- just its placeholder.
This is not always in line with the actual needs, so Vue provides you with a way to express "these two elements are completely independent, don't reuse them". Just add a key attribute with unique value:
<template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username" key="username-input"> </template> <template v-else> <label>Email</label> <input placeholder="Enter your email address" key="email-input"> </template>
Now, each time you switch, the input box will be re rendered.
Note that the < label > elements will still be reused efficiently because they do not add a key attribute.
2.v-show
Another option for displaying elements based on conditions is the v-show instruction. The usage is roughly the same:
<h1 v-show="ok">Hello!</h1>
The difference is that elements with v-show are always rendered and retained in the DOM. V-show simply switches the CSS property display of the element.
Note that v-show does not support < template > elements or v-else.
3.v-if vs v-show
v-if is a "real" conditional rendering because it ensures that event listeners and subcomponents within the conditional block are properly destroyed and rebuilt during switching.
v-if is also lazy: if the condition is false at the initial rendering, nothing is done -- the conditional block does not start rendering until the condition first becomes true.
In contrast, v-show is much simpler -- no matter what the initial conditions are, elements are always rendered and simply switched based on CSS.
Generally speaking, v-if has higher switching overhead, while v-show has higher initial rendering overhead. Therefore, if you need to switch very frequently, it is better to use v-show; If the conditions rarely change at run time, it is better to use v-if.
4. Use V-IF with v-show
Using both v-if and v-for is not recommended.
When v-if is used with v-for, v-for has a higher priority than v-if.