介绍

v-if 相当于 if 语句
v-else-if 相当于 else if语句
v-else 相当于 else语句

注意： 永远不要把 v-if 和 v-for 用在同一个元素上

例子

根据分数显示优、良、中、不及格

<style>
    [v-cloak] {
        display: none;
        }
</style>

<div id="app" v-cloak>
    <div v-if="core>=90">优</div>
    <div v-else-if="core>=80">良</div>
    <div v-else-if="core>=60">中</div>
    <div v-else>不及格</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
var app = new Vue({
  el: '#app',
  data: {
    core: 95
  }
})

查看网页源代码，如下图：

可知，只渲染符合条件的元素

<template> 元素上使用 v-if

因为 v-if 是一个指令，必须加到一个元素上。如果想切换多个元素，可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。

最终的渲染结果将不包含 <template> 元素。

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

原文出处：/show_1IXNbNzH1Uf.html