Vue.js 中使用 v-if 和 v-show 实现多个元素的切换显示

本文旨在介绍如何在 Vue.js 中使用 v-if 和 v-show 指令，配合数据驱动的方式，实现多个元素的独立切换显示功能，避免直接操作 DOM，遵循 Vue.js 的响应式编程思想，提供清晰的代码示例和详细的解释。

使用数据驱动实现多个元素的切换

在 Vue.js 中，避免直接操作 DOM 是一种最佳实践。对于需要切换显示多个元素的情况，我们可以利用 Vue 的数据绑定和指令来实现。核心思路是将每个元素的状态（例如，是否显示）存储在 data 中，然后通过 v-if 或 v-show 指令根据状态来控制元素的显示与隐藏。

1. 定义数据结构

首先，在 Vue 组件的 data() 中，定义一个数组，每个元素代表一个需要切换显示的元素。每个元素包含其内容和显示状态。

export default {
  data() {
    return {
      tooltips: [
        {
          content: 'Tooltip 内容 1',
          isVisible: false
        },
        {
          content: 'Tooltip 内容 2',
          isVisible: false
        },
        {
          content: 'Tooltip 内容 3',
          isVisible: false
        }
      ]
    }
  },
  methods: {
    toggleTooltip(tooltip) {
      tooltip.isVisible = !tooltip.isVisible;
    }
  }
}

在这个例子中，tooltips 数组包含了三个 tooltip 对象。每个对象都有 content 属性存储 tooltip 的内容，isVisible 属性控制 tooltip 的显示状态。toggleTooltip 方法用于切换 isVisible 的值。

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

2. 渲染模板

接下来，在 Vue 模板中使用 v-for 指令循环渲染 tooltips 数组。使用 v-if 或 v-show 指令根据 isVisible 属性来控制每个 tooltip 的显示。

<template>
  <div>
    <div v-for="(tooltip, index) in tooltips" :key="index" class="c-tooltip">
      <a @click="toggleTooltip(tooltip)" class="c-tooltip--link">
        {{ $label('toolTipLink') }}
      </a>
      <div v-if="tooltip.isVisible" class="c-tooltip--content">
        {{ tooltip.content }}
      </div>
    </div>
  </div>
</template>

在这个模板中，v-for 指令循环渲染 tooltips 数组，v-if 指令根据 tooltip.isVisible 的值决定是否渲染 tooltip 的内容。当点击链接时，toggleTooltip 方法会被调用，切换对应 tooltip 的 isVisible 属性，从而实现显示与隐藏的切换。

3. v-if vs v-show

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

• v-if: 当条件为真时，元素会被添加到 DOM 中；当条件为假时，元素会被从 DOM 中移除。这意味着 v-if 有更高的切换开销。
• v-show: 元素始终存在于 DOM 中，只是通过 CSS 的 display 属性来控制显示与隐藏。这意味着 v-show 有更高的初始渲染开销，但切换开销较低。

因此，如果切换频率较高，建议使用 v-show；如果切换频率较低，或者初始渲染性能更重要，建议使用 v-if。

4. 完整代码示例

<template>
  <div>
    <div v-for="(tooltip, index) in tooltips" :key="index" class="c-tooltip">
      <a @click="toggleTooltip(tooltip)" class="c-tooltip--link">
        {{ $label('toolTipLink') }}
      </a>
      <div v-if="tooltip.isVisible" class="c-tooltip--content">
        {{ tooltip.content }}
      </div>
    </div>
  </div>
</template>

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

这段代码展示了一个完整的示例，包括模板、脚本和样式。

总结

通过使用数据驱动的方式，结合 v-if 或 v-show 指令，可以方便地实现多个元素的独立切换显示功能。这种方法避免了直接操作 DOM，符合 Vue.js 的响应式编程思想，使代码更加清晰、易于维护。根据实际情况选择 v-if 或 v-show，可以优化性能。

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