Vue practical technology: in-depth study of v-if, v-show, v-else, v-else-if to implement data-driven conditional rendering

Vue practical technology: in-depth study of v-if, v-show, v-else, v-else-if to implement data-driven conditional rendering

Introduction
Vue is a powerful front-end framework whose conditional rendering instructions (v-if, v-show, v-else, v-else-if) can dynamically display or hide elements based on the state of the data. In this article, we'll take an in-depth look at these directives and provide concrete code examples to help readers better understand and use them.

v-if directive
The v-if directive is used to determine whether to render an element based on conditions. When the condition is true, the element will be rendered, otherwise it will not be rendered. The following is a specific example:

<template>
  <div>
    <p v-if="isUserLoggedIn">用户已登录</p>
    <p v-else>请先登录</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isUserLoggedIn: true
    }
  }
}
</script>

In the above example, based on the value of isUserLoggedIn, it is decided whether to render "The user has logged in" or "Please log in first". When isUserLoggedIn is true, render "The user has logged in", otherwise render "Please log in first".

v-show directive
The v-show directive is similar to v-if in that it displays or hides elements based on conditions. But the difference is that v-show does not actually delete or add DOM elements, but controls the display and hiding of elements by modifying the CSS properties display of the elements. The following is a specific example:

<template>
  <div>
    <p v-show="isUserLoggedIn">用户已登录</p>
    <p v-show="!isUserLoggedIn">请先登录</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isUserLoggedIn: true
    }
  }
}
</script>

In the above example, when isUserLoggedIn is true, "The user has logged in" is displayed; when isUserLoggedIn is false, "Please log in first" is displayed. Control the display and hiding of elements by modifying the element's display attribute.

v-else, v-else-if instructions
Sometimes we need to select one of multiple conditions for rendering, then we can use the v-else, v-else-if instructions. The v-else directive is used to render elements when the v-if or v-else-if condition is not met, while v-else-if is used to determine when the previous v-if or v-else-if condition is not met. Whether the next condition is met. The following is a specific example:

<template>
  <div>
    <p v-if="score >= 90">优秀</p>
    <p v-else-if="score >= 60">及格</p>
    <p v-else>不及格</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      score: 85
    }
  }
}
</script>

In the above example, different ratings are rendered by judging the value of score. If score is greater than or equal to 90, render "Excellent"; if score is greater than or equal to 60, render "Pass"; otherwise render "Fail".

Summary
Through in-depth study of v-if, v-show, v-else, v-else-if instructions, combined with specific code examples, we learned how to use these instructions to achieve Data-driven conditional rendering. In actual development, according to different needs and scenarios, we can flexibly choose to use these instructions to control the display and hiding of page elements, thereby improving the user experience.

I hope this article can help readers better master the skills of conditional rendering in Vue and further improve front-end development capabilities.

The above is the detailed content of Vue practical technology: in-depth study of v-if, v-show, v-else, v-else-if to implement data-driven conditional rendering. For more information, please follow other related articles on the PHP Chinese website!