Vue.js 中使用 v-if 和 v-show 动态切换多个元素

第一段引用上面的摘要：

本文旨在解决在 Vue.js 中动态切换多个元素显示与隐藏的问题，通过将每个元素的属性（如显示状态、内容等）存储在 Vue 实例的 data 中，并使用 v-for 指令循环渲染，结合 v-if 指令控制元素的显示与隐藏，避免了直接操作 DOM 的 jQuery 式方法，提供了一种更优雅和 Vue 化的解决方案。

在 Vue.js 中，直接操作 DOM 往往被认为是不推荐的做法。Vue 提供了响应式的数据绑定和指令系统，使得我们可以通过修改数据来驱动视图的更新。本文将介绍如何使用 v-if 和 v-show 指令，以及 Vue 的数据绑定特性，来实现多个元素的动态切换。

使用数据驱动视图

核心思想是将每个需要动态切换的元素的状态（例如，是否显示）存储在 Vue 实例的 data 属性中。这样，当状态发生变化时，Vue 会自动更新视图。

立即学习“前端免费学习笔记（深入）”；

定义数据结构

假设我们需要管理多个工具提示（tooltips），每个工具提示都有自己的内容和显示状态。我们可以定义一个数组，其中每个元素都是一个对象，包含 content（工具提示的内容）和 isClicked（工具提示是否显示）两个属性。

export default {
  data() {
    return {
      tooltips: [
        {
          content: 'Tooltip 1 Content',
          isClicked: false
        },
        {
          content: 'Tooltip 2 Content',
          isClicked: false
        },
        {
          content: 'Tooltip 3 Content',
          isClicked: false
        }
      ]
    }
  }
}

渲染元素

使用 v-for 指令循环遍历 tooltips 数组，为每个工具提示创建一个 HTML 结构。使用 v-if 指令根据 tooltip.isClicked 的值来决定是否显示工具提示的内容。

<template>
  <div class="tooltips-container">
    <div v-for="(tooltip, index) in tooltips" :key="index" class="c-tooltip">
      <a @click="clickTooltip(tooltip)" class="c-tooltip--link">
        Toggle Tooltip {{ index + 1 }}
      </a>
      <div v-if="tooltip.isClicked" class="c-tooltip--content">
        {{ tooltip.content }}
      </div>
    </div>
  </div>
</template>

注意 :key="index" 的使用，这对于 Vue 识别和高效更新列表非常重要。

切换显示状态

创建一个 clickTooltip 方法，用于切换指定工具提示的 isClicked 属性。

export default {
  data() {
    // ... (previous data)
  },
  methods: {
    clickTooltip(tooltip) {
      tooltip.isClicked = !tooltip.isClicked;
    }
  }
}

当点击链接时，clickTooltip 方法会被调用，传入当前工具提示对象 tooltip。该方法会切换 tooltip.isClicked 的值，从而触发 Vue 的响应式更新，显示或隐藏工具提示的内容。

v-if vs v-show

v-if 和 v-show 都可以控制元素的显示与隐藏，但它们的工作方式有所不同。

• v-if：当条件为真时，元素会被渲染到 DOM 中；当条件为假时，元素会被从 DOM 中移除。这意味着 v-if 有更高的切换开销，因为它需要创建和销毁 DOM 节点。
• v-show：无论条件为真还是假，元素都会被渲染到 DOM 中。当条件为假时，元素会被隐藏（通过设置 display: none）。这意味着 v-show 有更高的初始渲染开销，但切换开销较低。

一般来说，如果元素需要频繁切换显示状态，使用 v-show 更好；如果元素很少切换显示状态，使用 v-if 更好。在本例中，工具提示可能需要频繁切换，因此 v-show 可能更合适。只需将模板中的 v-if="tooltip.isClicked" 替换为 v-show="tooltip.isClicked" 即可。

完整代码示例

<template>
  <div class="tooltips-container">
    <div v-for="(tooltip, index) in tooltips" :key="index" class="c-tooltip">
      <a @click="clickTooltip(tooltip)" class="c-tooltip--link">
        Toggle Tooltip {{ index + 1 }}
      </a>
      <div v-if="tooltip.isClicked" class="c-tooltip--content">
        {{ tooltip.content }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tooltips: [
        {
          content: 'Tooltip 1 Content',
          isClicked: false
        },
        {
          content: 'Tooltip 2 Content',
          isClicked: false
        },
        {
          content: 'Tooltip 3 Content',
          isClicked: false
        }
      ]
    }
  },
  methods: {
    clickTooltip(tooltip) {
      tooltip.isClicked = !tooltip.isClicked;
    }
  }
}
</script>

总结

通过将元素的状态存储在 Vue 实例的 data 属性中，并使用 v-for 和 v-if (或 v-show) 指令，我们可以轻松地实现多个元素的动态切换，避免了直接操作 DOM 的 jQuery 式方法，使代码更具可读性和可维护性。选择 v-if 还是 v-show 取决于元素的切换频率。记住，Vue 的核心思想是数据驱动视图，利用好这一特性可以编写出更优雅的 Vue 代码。

以上就是Vue.js 中使用 v-if 和 v-show 动态切换多个元素的详细内容，更多请关注php中文网其它相关文章！