vue3教程：v-if、v-else-if、v-else指令-马育民老师

# 介绍

`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>
```

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

[![](https://www.malaoshi.top/upload/pic/vue/QQ20210110102828.png)](https://www.malaoshi.top/upload/pic/vue/QQ20210110102828.png)

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

#  `<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>
```

原文出处：http://malaoshi.top/show_1GWEgRCxf7Q.html