Vue 3 中 v-if 指令的使用详解

最新推荐文章于 2026-05-06 22:32:55 发布

原创

最新推荐文章于 2026-05-06 22:32:55 发布 · 3.8k 阅读

标签

#vue.js #前端 #javascript

收录于

Vue 3 中 `v-if` 指令的使用详解

Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架，它提供了丰富的指令来简化 DOM 操作和数据绑定。在 Vue 3 中，v-if 是一个非常重要的条件渲染指令，它允许根据表达式的真假值来决定是否渲染某个元素或组件。本文将详细介绍 v-if 的用法、与其他条件渲染指令的区别以及一些最佳实践，并通过具体的代码示例帮助你更好地掌握这一功能。

`v-if` 简介

v-if 是 Vue 提供的一个条件渲染指令，当绑定到它的表达式返回 true 或者其他真值时，元素会被插入到 DOM 中；反之，如果表达式返回 false 或者假值，则该元素不会被渲染，也不会存在于 DOM 树中。这意味着 v-if 实现了真正的条件性渲染，而不是仅仅隐藏元素。

基本语法

<element v-if="expression"></element>

其中 element 是任意 HTML 元素或者自定义组件，而 expression 是一个 JavaScript 表达式，它可以是简单的布尔值、变量、计算属性等。

使用场景与示例

示例 1：基本用法

假设我们有一个按钮，只有在用户登录状态下才显示：

<template>
  <div id="app">
    <button v-if="isLoggedIn">Logout</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const isLoggedIn = ref(true); // 假设用户已经登录
</script>

在这个例子中，isLoggedIn 是一个由 ref 创建的响应式引用。如果它的值为 true<