第一段引用上面的摘要：
本文旨在解决在 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 代码。
评论（已关闭）
评论已关闭