介绍

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 type="importmap">
{
    "imports": {
        "vue": "./js/vue.esm-browser@3.5.13.js"
    }
}
</script>
<script type="module">
  import { createApp } from 'vue'

  createApp({
    data: function(){
        return { //数据
            core: 95
        }    
    }
  }).mount('#app')
</script>

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

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

<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_1GWEgRCxf7Q.html