Vue 3 v-for 循环中实现按钮激活状态切换：单选与多选模式教程

本教程详细讲解了如何在 vue 3 的 `v-for` 循环中管理按钮的激活状态。我们将探讨两种常见场景：单选模式（一次只能选择一个或不选）和多选模式（可以同时选择多个）。通过 composition api 和响应式数据，您将学习如何高效地实现按钮的点击切换、样式绑定以及数据同步，从而构建灵活的用户界面。

在构建交互式前端应用时，经常会遇到需要对列表中的元素进行选择或筛选的场景，例如筛选器、标签页或多选列表。这些场景通常要求按钮在被点击时显示为“激活”状态，并能根据业务逻辑进行切换。Vue 3 结合 Composition API 提供了简洁高效的方式来实现这一功能。

一、单选模式：一次只能选择一个或不选

单选模式适用于需要用户从一组选项中选择唯一一个，或者不选择任何选项的场景。例如，一个内容分类筛选器，用户点击一个分类，该分类按钮高亮；再次点击同一个按钮，则取消高亮；点击另一个分类，则切换高亮到新分类。

核心思路

在单选模式下，我们需要一个响应式变量来存储当前被激活的选项的标识。当用户点击按钮时，我们根据该标识来判断是切换激活状态还是取消激活。

实现步骤

1. 数据结构: 使用一个 ref 变量（例如 selectedCategory）来存储当前激活的分类名称（字符串）。如果没有任何分类被激活，则该变量可以为空字符串。
2. 模板渲染: 使用 v-for 遍历分类列表，为每个按钮绑定点击事件 (@click) 和动态类名 (:class)。
3. 逻辑处理: 在点击事件处理函数中，检查当前点击的分类是否与 selectedCategory.value 相同。如果相同，说明用户希望取消激活，将 selectedCategory.value 设置为空字符串；如果不同，则更新 selectedCategory.value 为当前点击的分类。

代码示例

<template>
  <div class="filter-container">
    <button
      v-for="category in contentCategories"
      :key="category"
      @click="toggleSingleCategory(category)"
      :class="{ 'active-button': selectedCategory === category }"
      class="filter-button"
    >
      {{ category }}
    </button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 定义所有可用的分类列表
const contentCategories = ref(["Category 1", "Category 2", "Category 3", "Category 4"]);

// 定义一个响应式变量，用于存储当前被激活的分类
// 初始值为空字符串，表示没有分类被激活
const selectedCategory = ref("");

/**
 * 切换单选分类的激活状态
 * @param {string} category - 被点击的分类名称
 */
const toggleSingleCategory = (category) => {
  if (selectedCategory.value === category) {
    // 如果点击的是当前已激活的按钮，则取消激活
    selectedCategory.value = "";
  } else {
    // 否则，激活当前点击的按钮
    selectedCategory.value = category;
  }
};
</script>

<style scoped>
.filter-container {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.filter-button {
  padding: 8px 15px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  cursor: pointer;
  border-radius: 5px;
  transition: all 0.2s ease-in-out;
  font-size: 14px;
}

.filter-button:hover {
  background-color: #e0e0e0;
}

.active-button {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
  box-shadow: 0 2px 5px rgba(0, 123, 255, 0.3);
}
</style>

代码解析

• contentCategories: 这是一个 ref 数组，包含了所有待渲染的分类名称。
• selectedCategory: 这是一个 ref 字符串，它保存了当前唯一激活的分类名称。其初始值为空字符串，表示页面加载时没有分类被选中。
• v-for="category in contentCategories": 遍历 contentCategories 数组，为每个分类生成一个 <button> 元素。
• :key="category": 在 v-for 中提供 :key 是最佳实践，有助于 Vue 更高效地更新列表。
• @click="toggleSingleCategory(category)": 当按钮被点击时，调用 toggleSingleCategory 函数，并传入当前分类的名称。
• :class="{ 'active-button': selectedCategory === category }": 这是一个动态类绑定。当 selectedCategory.value 与当前按钮的 category 相同时，active-button 类会被添加到该按钮上，从而应用激活样式。
• toggleSingleCategory 函数的逻辑确保了“点击已激活按钮取消激活”和“点击其他按钮切换激活”的行为。

二、多选模式：同时选择多个或不选

多选模式允许用户从一组选项中选择一个或多个，或者不选择任何选项。例如，一个筛选器可以同时选择“标签 A”和“标签 B”来查看符合两个标签的内容。

百灵大模型

蚂蚁集团自研的多模态AI大模型系列

177

查看详情

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

核心思路

在多选模式下，每个选项都需要有自己的激活状态。因此，我们需要一个更复杂的数据结构来存储每个选项的名称和其独立的激活状态。

实现步骤

1. 数据结构: 将分类列表定义为一个对象数组，每个对象包含 name（分类名称）和 active（布尔值，表示是否激活）属性。
2. 模板渲染: 同样使用 v-for 遍历对象数组，绑定点击事件和动态类名。
3. 逻辑处理: 在点击事件处理函数中，直接切换被点击项的 active 属性。

代码示例

<template>
  <div class="filter-container">
    <button
      v-for="categoryItem in contentCategoriesMulti"
      :key="categoryItem.name"
      @click="toggleMultipleCategory(categoryItem)"
      :class="{ 'active-button': categoryItem.active }"
      class="filter-button"
    >
      {{ categoryItem.name }}
    </button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 定义一个响应式数组，每个元素都是一个包含名称和激活状态的对象
const contentCategoriesMulti = ref([
  { name: "Category A", active: false },
  { name: "Category B", active: false },
  { name: "Category C", active: false },
  { name: "Category D", active: false },
]);

/**
 * 切换多选分类的激活状态
 * @param {object} categoryItem - 被点击的分类对象
 */
const toggleMultipleCategory = (categoryItem) => {
  // 直接切换该分类对象的 active 属性
  categoryItem.active = !categoryItem.active;
};
</script>

<style scoped>
/*
  CSS 样式与单选模式相同，这里省略重复代码，
  实际应用中请确保 .filter-container, .filter-button, .active-button 样式已定义。
*/
.filter-container {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.filter-button {
  padding: 8px 15px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  cursor: pointer;
  border-radius: 5px;
  transition: all 0.2s ease-in-out;
  font-size: 14px;
}

.filter-button:hover {
  background-color: #e0e0e0;
}

.active-button {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
  box-shadow: 0 2px 5px rgba(0, 123, 255, 0.3);
}
</style>

代码解析

• contentCategoriesMulti: 这是一个 ref 数组，每个元素都是一个对象 { name: string, active: boolean }。active 属性直接反映了该分类的激活状态。
• v-for="categoryItem in contentCategoriesMulti": 遍历对象数组，为每个分类项生成按钮。
• :key="categoryItem.name": 使用分类的 name 作为 key。
• @click="toggleMultipleCategory(categoryItem)": 点击时调用 toggleMultipleCategory，并传入整个分类对象。
• :class="{ 'active-button': categoryItem.active }": 根据 categoryItem.active 的布尔值来动态添加或移除 active-button 类。
• toggleMultipleCategory 函数直接修改传入的 categoryItem 对象的 active 属性。由于 contentCategoriesMulti 是一个 ref 数组，并且其内部的对象也是响应式的（Vue 3 会自动对 ref 内部的对象进行深度响应式处理），所以这种修改会触发视图更新。

三、注意事项与总结

1. 响应式原理: 在 Vue 3 Composition API 中，使用 ref 来创建响应式数据至关重要。只有响应式数据的变化才能触发视图的重新渲染。
2. v-for 的 key 属性: 始终为 v-for 列表中的每个项提供一个唯一的 key。这有助于 Vue 优化列表渲染性能，并在数据项顺序改变时保持组件状态。
3. CSS 样式: 教程中的示例代码包含了基本的 CSS 样式来演示激活状态。在实际项目中，您需要根据设计需求定义 active-button 类以及其他按钮样式。
4. 数据管理:
   • 单选: 适合使用一个简单变量（如字符串或数字）来存储当前选中项的标识。
   • 多选: 适合使用一个对象数组，每个对象包含其自身的激活状态。
5. 业务逻辑扩展:
   • 数据过滤: 结合 computed 属性，您可以根据 selectedCategory 或 contentCategoriesMulti 中 active 为 true 的项来过滤显示的数据列表。
   • 初始状态: 可以根据需要设置 selectedCategory 或 contentCategoriesMulti 的初始值，以预设某些按钮为激活状态。
   • 禁用状态: 可以为按钮添加 disabled 属性，根据某些条件禁用按钮的点击功能。

通过掌握上述单选和多选模式的实现方法，您将能够灵活地在 Vue 3 应用中处理列表按钮的激活状态，构建出功能丰富且用户体验良好的交互界面。

以上就是Vue 3 v-for 循环中实现按钮激活状态切换：单选与多选模式教程的详细内容，更多请关注php中文网其它相关文章！