一个例子演示Vue中的条件渲染

当然，Vue中的条件渲染可以通过v-if、v-else-if和v-else指令来实现。下面是一个简单的例子，演示了如何在Vue中使用这些指令进行条件渲染：

html

<template>

  <div>

    <p v-if="score >= 90">优秀</p>

    <p v-else-if="score >= 75">良好</p>

    <p v-else-if="score >= 60">及格</p>

    <p v-else>不及格</p>

    <p>你的分数是: {{ score }}</p>

  </div>

</template>

<script>

export default {

  data() {

    return {

      score: 85

    }

  }

}

</script>

在这个例子中，我们有一个score变量，代表了一个分数。我们使用了v-if、v-else-if和v-else来根据score的值渲染不同的文本。

如果score大于等于90，那么会渲染“优秀”。

如果score在75到89之间，那么会渲染“良好”。

如果score在60到74之间，那么会渲染“及格”。

如果score小于60，那么会渲染“不及格”。

v-if指令是“惰性”的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。一旦渲染，即使条件再次变为假，v-if块也仍然会保持在DOM中。v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。

此外，Vue还提供了一个v-show指令，它根据表达式之真假值，切换元素的 display CSS 属性。当条件变化时，该指令简单地切换元素的 CSS 属性。与v-if不同，v-show不论初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。