Vue3 v-if 指令
Vue3 内置指令v-if 指令用于条件渲染，根据表达式的真假值决定是否渲染元素或模板片段。
基本说明
v-if 指令会根据绑定表达式的真假值有条件地渲染元素。当条件为真时，元素会被渲染到 DOM 中；当条件为假时，元素不会被渲染。
- 期望类型: any
- 作用: 条件渲染，根据表达式的真假值决定是否渲染元素。条件为假时不渲染 DOM。
基本用法
实例
<template>
<div>
<p v-if="isLoggedIn">欢迎回来，用户</p>
<p v-else>请登录</p>
</div>
</template>
<script>
export default {
data() {
return { isLoggedIn: true }
}
}
</script>
<div>
<p v-if="isLoggedIn">欢迎回来，用户</p>
<p v-else>请登录</p>
</div>
</template>
<script>
export default {
data() {
return { isLoggedIn: true }
}
}
</script>
与 v-else 和 v-else-if 配合
v-if 可以与 v-else-if 和 v-else 配合使用，形成条件链：
实例
<div v-if="status === 'loading'">加载中...</div>
<div v-else-if="status === 'error'">加载失败</div>
<div v-else>内容：{{ data }}</div>
<div v-else-if="status === 'error'">加载失败</div>
<div v-else>内容：{{ data }}</div>