当前位置： 技术文章>> Vue 中如何使用 v-if 与 v-show 动态控制显示？

文章标题：Vue 中如何使用 v-if 与 v-show 动态控制显示？
  • 文章分类: 后端
  • 6585 阅读

在Vue.js框架中，v-if 和 v-show 是两个非常实用的指令，用于根据条件动态地控制元素的显示与隐藏。虽然它们的功能看似相似，但实际上在内部实现和性能影响上有所不同。了解并恰当使用这两个指令，对于提升Vue应用的性能和用户体验至关重要。接下来，我们将深入探讨如何在Vue中有效使用v-if与v-show。

一、v-if 的使用

v-if 指令用于根据表达式的真假值来条件性地渲染元素。如果表达式的值为真（truthy），则渲染该元素及其子元素；如果为假（falsy），则不渲染该元素，且该元素及其子元素在DOM中会被销毁，不会占用任何资源。

示例

假设我们有一个Vue组件，需要根据用户的登录状态来显示不同的内容：

<template>
  <div>
    <h1>欢迎来到码小课</h1>
    <div v-if="isLoggedIn">
      <p>你好，{{ userName }}!</p>
      <button @click="logout">登出</button>
    </div>
    <div v-else>
      <p>请登录以查看更多内容。</p>
      <button @click="login">登录</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false,
      userName: ''
    };
  },
  methods: {
    login() {
      // 模拟登录逻辑
      this.isLoggedIn = true;
      this.userName = '张三';
    },
    logout() {
      // 模拟登出逻辑
      this.isLoggedIn = false;
      this.userName = '';
    }
  }
};
</script>

在这个例子中，v-if 和 v-else 指令根据 isLoggedIn 的值来决定显示登录后的内容还是登录前的提示。当 isLoggedIn 为 true 时，显示用户名和登出按钮；为 false 时，则显示登录提示和登录按钮。

二、v-show 的使用

与 v-if 不同，v-show 指令也是根据表达式的真假值来控制元素的显示与隐藏，但它不会销毁或重建元素。无论条件真假，元素始终会被渲染到DOM中，只是简单地通过改变CSS的 display 属性来控制其显示或隐藏。

示例

继续使用上面的登录示例，但这次我们使用 v-show 来控制登录状态的显示：

<template>
  <div>
    <h1>欢迎来到码小课</h1>
    <div v-show="isLoggedIn">
      <p>你好，{{ userName }}!</p>
      <button @click="logout">登出</button>
    </div>
    <div v-show="!isLoggedIn">
      <p>请登录以查看更多内容。</p>
      <button @click="login">登录</button>
    </div>
  </div>
</template>

<script>
// 脚本部分与上面相同
</script>

在这个例子中，无论 isLoggedIn 的值如何变化，两个 <div> 元素都会被渲染到DOM中，只是通过改变CSS的 display 属性来控制它们的显示与隐藏。

三、v-if 与 v-show 的区别与选择

性能差异

  • v-if：条件不满足时，元素及其子元素不会被渲染到DOM中，也不会参与DOM树的构建，因此可以节省资源。但如果在条件频繁切换的场景下使用，由于元素的销毁和重建，可能会带来一定的性能开销。
  • v-show：无论条件如何，元素始终会被渲染到DOM中，只是简单地通过CSS控制显示与隐藏。因此，在条件频繁切换时，v-show 的性能通常优于 v-if，因为它避免了DOM的销毁和重建。

使用场景

  • v-if：适用于条件很少改变，或者条件改变时元素需要被销毁的场景。比如，根据用户权限显示不同的内容，或者根据用户是否登录显示不同的导航菜单。
  • v-show：适用于条件频繁改变，且元素不需要被销毁的场景。比如，根据用户的点击操作显示或隐藏一个提示框。

四、结合使用

在实际开发中，v-if 和 v-show 并不是互斥的，而是可以根据需要灵活结合使用。例如，可以在外层使用 v-if 来控制是否渲染某个组件或元素，而在该组件或元素内部使用 v-show 来控制其子元素的显示与隐藏。

五、总结

v-if 和 v-show 是Vue中用于动态控制元素显示与隐藏的两个重要指令。它们各有优缺点，适用于不同的场景。了解并恰当使用这两个指令，可以帮助我们编写出更高效、更易于维护的Vue应用。在码小课的学习过程中，深入理解和掌握这些基础知识，将为你后续的Vue开发之路打下坚实的基础。

推荐文章