Vue.js 中 v-if, v-else 和 v-show 指令详解

v-if 和 v-else

v-if 和 v-else 是一对指令，用于根据条件控制元素的显示和隐藏。v-if 用于条件判断，如果条件为真，则显示元素；如果条件为假，则隐藏元素。v-else 则用于在 v-if 条件为假时显示另一个元素。

v-show

v-show 也用于控制元素的显示和隐藏，但它不是通过添加或删除元素来实现的，而是通过 CSS 的 display 属性来控制元素的显示和隐藏。如果 v-show 的值为真，则元素会显示；如果 v-show 的值为假，则元素会隐藏。

总结

v-if 和 v-else 适用于需要根据条件判断来显示不同的元素的场景，例如根据用户的登录状态显示不同的内容。v-show 适用于需要频繁切换显示和隐藏的场景，例如控制一个弹窗的显示和隐藏。

示例代码

<template>
  <div>
    <p v-if='show'>这是显示的文本</p>
    <p v-else>这是隐藏的文本</p>
    <p v-show='show'>这是另一个显示的文本</p>
  </div>
</template>

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

选择使用 v-if 还是 v-show 的建议

如果元素需要根据条件进行 动态渲染，则使用 v-if。
如果元素需要 频繁切换显示和隐藏，则使用 v-show。