第一段引用上面的摘要：
本文旨在解决在 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>
<style scoped>
.c-tooltip--content {
border: 1px solid #ccc;
padding: 10px;
margin-top: 5px;
}
</style>总结
通过将元素的状态存储在 Vue 实例的 data 属性中，并使用 v-for 和 v-if (或 v-show) 指令，我们可以轻松地实现多个元素的动态切换，避免了直接操作 DOM 的 jQuery 式方法，使代码更具可读性和可维护性。选择 v-if 还是 v-show 取决于元素的切换频率。记住，Vue 的核心思想是数据驱动视图，利用好这一特性可以编写出更优雅的 Vue 代码。
