preface

This is my 37th day in Denver

Start learning Vue3 again this month, from understanding basic usage to simulation implementation!

Related articles in this series are as follows:

The base class

  1. Understand the application examples and component instance | relearn Vue3
  2. Understand the template syntax | relearn Vue3
  3. Deep understanding of the data and the methods of configuration options | relearn Vue3
  4. Understanding calculate attribute and listener | relearn Vue3
  5. The binding class and inline style style | relearn Vue3

Handwriting implementation class

  1. Simulate the Vue3 initialization process
  2. Simulate implementation of all Vue3 responsive APIS (1)

This is the eighth article on Vue’s conditional rendering instructions: V-if and V-show

Look at the text and you will get a clear idea of conditional rendering

The directory structure is as follows:

v-if

This punishment 3 small points:

1. Used to render a piece of content based on conditions

Render the actual element, depending on the value of the following expression

2. Rendered when the directive expression returns a Truthy value

If the Boolean value returned by the expression is true, it will be rendered as follows:

<template>
  <p v-if="isOK">When the Boolean value of v-if is true, you can see me</p>
</template>
<script>

export default {
  name: 'App'.data() {
    return {
      isOK:true}}}</script>
Copy the code

The results

What if the Boolean value returned is false, as follows

isOK:false
Copy the code

The results

You can see that it doesn’t render the element at all

3. We can still be here<template>Use V-if on the element to render a set of elements

For example, render the following three P elements simultaneously

<template>
  <template v-if="isOK">
    <p>Render a group</p>
    <p>I was rendered</p>
    <p>I was also rendered</p>
  </template>
</template>
<script>
export default {
  name: "App".data() {
    return {
      isOK: true}; }};</script>
Copy the code

The results are as follows

You can see that the three elements are actually rendered together

v-else

This punishment is 2 small points:

1. Else block for V-if

For example, the else module is displayed when a non-administrator logs in to the system

<template>
  <div class="app">
    <div v-if="role == 'admin' || role == 'superAdmin'">Management Hello!</div>
    <! - < div v - else - if = "role = = 'HR'" > HR hello, please check list view view resume:... </div> -->
    <div v-else>No option to visit this page!</div>
  </div>
</template>
<script>
export default {
  name: "App".data() {
    return {
      role: 'HR'}; }};</script>
Copy the code

The results are as follows

And you can see that the value is in the else module

2. Note: The V-else element must immediately follow the v-if or V-else-if element, otherwise it will not be recognized

For example, the result of using the V-else alone is that the instruction is as useless as without the property

v-else-if

This punishment is 2 small points:

1. Act as an “else-if block” for V-if

The following is not admin, but HR login system

<template>
  <div class="app">
    <div v-if="role == 'admin' || role == 'superAdmin'">Management Hello!</div>
    <div v-else-if="role == 'HR'">Hi HR, please check the resume list:......</div>
    <div v-else>No option to visit this page!</div>
  </div>
</template>
<script>
export default {
  name: "App".data() {
    return {
      role: "HR"}; }};</script>
Copy the code

The results are as follows

2. You can continuously use the following commands to add BOSS permission

<template>
  <div class="app">
    <div v-if="role == 'admin' || role == 'superAdmin'">Management Hello!</div>
    <div v-else-if="role == 'HR'">Hi HR, please check the resume list:......</div>
    <div v-else-if="role == 'BOSS'">BOSS: hello!!!!!!</div>
    <div v-else>No option to visit this page!</div>
  </div>
</template>
<script>
export default {
  name: "App".data() {
    return {
      role: "BOSS"}}}</script>
Copy the code

The results are as follows

And you can see that you can actually use v-else-if continuously

v-show

This punishment is based on four small points:

1. Similar to V-if, it is used to display elements according to conditions

Let’s say I change v-if to V-show

<template>
    <div v-show="role == 'admin' || role == 'superAdmin'">Management Hello!</div>
</template>
<script>
export default {
  name: "App".data() {
    return {
      role: "admin"}}}</script>
Copy the code

The results are as follows

And you can see it’s the same as v-if

2. The difference is that elements of v-show are always rendered and remain in the DOM

For example, if I delete the role value from the example above, the result is as follows

As you can see, the element is rendered into the HTML structure regardless of whether the Boolean value returned is true or false. When it is false, it is simply not displayed, i.e. display is none

3. The essence is to switch the value of display

This has been proven above

4. Note that V-show is not supported<template>Element, nor does v-else support

The difference between v-if and V-show

Here is a summary of 3 small points:

1. V-if is “true” conditional rendering; The V-show element is always rendered, and then simply toggle the value of display

2. V-if is also lazy. If the condition is false at the initial render, then nothing is done until the condition becomes true for the first time

3. V-if has a higher switching overhead, while V-show has a higher initial rendering overhead, so v-show is better if switching is required very frequently; V-if is preferable if the conditions rarely change at run time

conclusion

To make it easier to view, I’ve distilled everything into one image

END~

That’s all for conditional rendering

If you have any questions, please leave a message. Thank you