Advanced skills in Vue conditional rendering: master v-if, v-show, v-else, v-else-if to implement complex logical judgments

Vue is a popular front-end framework that provides many flexible features, among which conditional rendering is one of the commonly used functions in development. In Vue, we can use v-if, v-show, v-else, v-else-if and other instructions to implement complex logical judgment and conditional rendering. This article explains how to use these directives and provides some specific code examples.

The v-if instruction is the most commonly used conditional rendering instruction. You can add the v-if attribute to a DOM element to determine whether to render the element based on conditions. The v-if directive adds or removes DOM elements based on whether an expression is true or false. For example, we can display different content based on whether the user is logged in:

<template>
  <div>
    <div v-if="isLoggedin">
      欢迎回来，{{ username }}！
    </div>
    <div v-else>
      请登录后查看内容。
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedin: false,
      username: 'John'
    }
  }
}
</script>

In the above code, based on the value of isLoggedin, we can decide to display a welcome message or a login prompt. When isLoggedin is true, the welcome message is displayed, otherwise the login prompt is displayed.

The v-show instruction is similar to the v-if instruction. It can also control the display and hiding of elements based on conditions. However, it does not remove the DOM structure. It only controls the visibility of the element by setting the display attribute of the element. sex. When using the v-show directive, the element always exists in the DOM, and the display attribute is only set based on conditions to determine whether to display it. The following is an example:

<template>
  <div>
    <button @click="toggle">切换</button>
    <div v-show="isShow">
      这是一个隐藏的元素。
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false
    }
  },
  methods: {
    toggle() {
      this.isShow = !this.isShow;
    }
  }
}
</script>

In the above code, we control the display and hiding of elements by clicking the button to switch the value of isShow.

In addition to v-if and v-show, Vue also provides v-else and v-else-if instructions to handle multi-condition rendering situations. v-else is used in conjunction with v-if, which means that if the previous v-if condition is not true, the content of v-else will be executed. v-else-if is used to switch between multiple conditions, and its usage is similar to v-else. The following is an example of multi-condition rendering:

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

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

In the above code, based on the value of score, we can determine the student's performance level. If the score is greater than or equal to 90, "Excellent" is displayed; if the score is greater than or equal to 60, "Pass" is displayed; otherwise, "Fail" is displayed.

By mastering the conditional rendering instructions of v-if, v-show, v-else, v-else-if, we can flexibly respond to various complex logical judgment requirements in Vue development. The code examples given above can help you better understand how to use these instructions. I hope this article will be helpful for everyone to learn Vue's conditional rendering.

The above is the detailed content of Advanced skills in Vue conditional rendering: master v-if, v-show, v-else, v-else-if to implement complex logical judgments. For more information, please follow other related articles on the PHP Chinese website!