Conditional rendering

Table of contents

• v-if

  • Use v-if conditional rendering grouping on the <template> element

  • v-else

  • v-else-if
    

  • ##Use key to manage reusable elements

• v-show
  

• ##v-if vs v-show

• v-if used with v-for

# The

#v-if##v-if

<h1 v-if="awesome">Vue is awesome!</h1>

You can also add an "else block" using v-else:

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no ??</h1>

at

Use v-if conditional rendering grouping on elementsBecause v-if is a directive, So it must be added to an element. But what if you want to switch multiple elements? At this time, you can treat a

element as an invisible wrapping element and use v-if on it. The final rendering result will not contain the <template> element.

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

##v-else

You can use the v-else command 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>

v-if

v-else- if after the element, otherwise it will not be recognized.

##2.1.0 Newv-else-if

v-if

and can be used continuously:

<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>

v-else, v-else-if must also immediately follow the element with v-if

v-else-if after. Use

to manage reusable elements

Vue will do its best May render elements efficiently, often by reusing existing elements rather than rendering them from scratch. In addition to making Vue very fast, this has several 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 both templates use the same element, <input> is not replaced—only its placeholder is replaced.

Try it yourself, enter some text in the input box and press the toggle button:

This doesn't always meet 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 a 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 the input box will be re-rendered every time it switches. See:

<h1 v-show="ok">Hello!</h1>