Analysis of conditional rendering in Vue (with code)

This article introduces you to the analysis of conditional rendering in Vue (with code). It has a good reference value. I hope it can help friends in need.

Conditional instructions

The so-called conditional instructions refer to which part of the code is executed when a certain condition is met, and which part of the conditional code is executed when the condition is not met. There are three vue conditional instructions: v-if, v-else-if, and v-else. v-if conditional rendering is used to indicate whether an element is removed or inserted, and the element is rendered according to the true or false condition of the expression value.

v-if example

Method 1 uses v-if to display labels. When the initialization value is true, the first label is displayed. When the initialization value is false , the second label is displayed:

<template>
<div>
<p class="title1">{{title}}</p>
<div class="div1">
  <span v-if="isshow">ishow为true我将首次展现</span>
<span v-if="!isshow">ishow为false我将首次展现</span>
  </div>
</template>

<script>
  export default {
        name: &#39;v-if&#39;,
      data () {
          return {
            title: &#39;条件渲染&#39;,
            isshow: true
          }
      }
    }
</script>

<style scoped>
  .title1 {
    text-align: left;
  }
  .div1{
    float: left;
  }
</style>

##v-else- if<br/>

Conditions of use: v-else-if must be followed immediately by v-if or v- After the element of else-if, it is used when there are multiple judgment conditions in the project.

Usage method 1: Use a string to display the label. When the initialization value of the judgment condition is string 1, the if label is displayed. When the initialization value of the judgment condition is not string 1, Then the v-else-if condition label is displayed according to the judgment condition. The example is as follows:

<template>
  <div>
    <p class="title1">{{title}}</p>
    <div class="div1">
      <span v-if="isshow===&#39;1&#39;">ishow为字符串类型1我将首次展现</span>
      <span v-else-if="isshow===&#39;2&#39;">(elseif)否则ishow为字符串类型2我将首次展现</span>
      <span v-else-if="isshow===&#39;3&#39;">(elseif)否则ishow为字符串类型3我将首次展现</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: &#39;v-if&#39;,
    data () {
      return {
        title: &#39;条件渲染&#39;,
        isshow: &#39;2&#39;
      }
    }
  }
</script>

<style scoped>
  .title1 {
    text-align: left;
  }
  .div1{
    float: left;
  }
</style>

## Usage method 2: Use the numeric type to display the label

. When the initialization value of the judgment condition is numeric type 1, the if label will be displayed. When the initialization value of the judgment condition is not numeric type 1, it will be displayed according to the judgment condition. v-else-if conditional tag, the example is as follows:

<template>
  <div>
    <p class="title1">{{title}}</p>
    <div class="div1">
      <span v-if="isshow===1">ishow为数字类型1我将首次展现</span>
      <span v-else-if="isshow===2">(elseif)否则ishow为数字类型2我将首次展现</span>
      <span v-else-if="isshow===3">(elseif)否则ishow为数字类型3我将首次展现</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: &#39;v-if&#39;,
    data () {
      return {
        title: &#39;条件渲染&#39;,
        isshow: 3
      }
    }
  }
</script>

<style scoped>
  .title1 {
    text-align: left;
  }
  .div1{
    float: left;
  }
</style>

##v-else example

Using condition:

v-else# The ## element must immediately follow an element with

v-if or v-else-if, otherwise it will not be recognized. Usage method one: if-else type, use initialization bool value to display label:

<template>
  <div>
    <p class="title1">{{title}}</p>
    <div class="div1">
      <span v-if="isshow">ishow为true我将首次展现</span>
      <span v-if="!isshow">ishow为false我将首次展现</span>
    </div>
  </div>
</template>

<script>
  export default {
        name: &#39;v-if&#39;,
      data () {
          return {
            title: &#39;条件渲染&#39;,
            isshow: false
          }
      }
    }
</script>

<style scoped>
  .title1 {
    text-align: left;
  }
  .div1{
    float: left;
  }
</style>

Usage method two: if-else type, use string to display the label. When the initialization value is string 1, the if label is displayed. When the initialization value is not string 1, the else is displayed. Label, examples are as follows:

<template>
  <div>
    <p class="title1">{{title}}</p>
    <div class="div1">
      <span v-if="isshow===&#39;1&#39;">ishow为字符串1我将首次展现</span>
      <span v-else>ishow不为字符串1我将首次展现</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: &#39;v-if&#39;,
    data () {
      return {
        title: &#39;条件渲染&#39;,
        isshow: &#39;1&#39;
      }
    }
  }
</script>

<style scoped>
  .title1 {
    text-align: left;
  }
  .div1{
    float: left;
  }
</style>

Usage method three: if-else type, use numeric type to display the label, when the initialization value is numeric type 1 , display the if tag, and when the initialization value is not a numeric type 1, display the else tag. The example is as follows:

<template>
  <div>
    <p class="title1">{{title}}</p>
    <div class="div1">
      <span v-if="isshow===1">ishow为数字类型1我将首次展现</span>
      <span v-else>ishow不为数字类型1我将首次展现</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: &#39;v-if&#39;,
    data () {
      return {
        title: &#39;条件渲染&#39;,
        isshow: &#39;1&#39;
      }
    }
  }
</script>

<style scoped>
  .title1 {
    text-align: left;
  }
  .div1{
    float: left;
  }
</style>

Usage method four: if-elseif- else type, when neither if nor elseif conditions are met, the else label is displayed. The example is as follows:

<template>
  <div>
    <p class="title1">{{title}}</p>
    <div class="div1">
      <span v-if="isshow===1">ishow为数字类型1我将首次展现</span>
      <span v-else-if="isshow===2">(elseif)否则ishow为数字类型2我将首次展现</span>
      <span v-else>if-elseif条件都不满足，我将首次展现</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: &#39;v-if&#39;,
    data () {
      return {
        title: &#39;条件渲染&#39;,
        isshow: 3
      }
    }
  }
</script>

<style scoped>
  .title1 {
    text-align: left;
  }
  .div1{
    float: left;
  }
</style>

Summary: Complex programs are all made of simple judgments It is formed by changing the combination of conditions. The most important thing is to use the judgment conditions flexibly in the program.

Related recommendations:

Analysis of v-model directive in Vue (with code)

The above is the detailed content of Analysis of conditional rendering in Vue (with code). For more information, please follow other related articles on the PHP Chinese website!