Vue 3 v-for 循环中实现按钮的单选与切换激活状态

// script setup 块中
import { ref } from 'vue';

// 假设这是你的内容类别数据
const contentCategories = ref(["Category 1", "Category 2", "Category 3", "Category 4"]);

// 定义一个响应式变量来存储当前选中的类别
// 初始值设为空字符串，表示没有类别被选中
const selectedCategory = ref('');

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

// script setup 块中
// ... (之前的 import 和 ref 定义)

function handleClick(category) {
  if (selectedCategory.value === category) {
    // 如果点击的是当前已激活的类别，则取消激活（设为空字符串）
    selectedCategory.value = '';
  } else {
    // 如果点击的是其他类别或当前没有激活类别，则激活新类别
    selectedCategory.value = category;
  }
}

/* style 块中 */
.filter-container {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

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

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

.filter-button.active {
  background-color: #007bff; /* 激活状态的背景色 */
  color: white; /* 激活状态的文字颜色 */
  border-color: #007bff;
}

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

  <p>当前选中的类别：{{ selectedCategory === '' ? '无' : selectedCategory }}</p>

  <!-- 假设这里是你的内容列表，可以根据 selectedCategory 进行过滤 -->
  <div class="content-list">
    <h3>过滤后的内容 (示例)</h3>
    <ul>
      <li v-for="item in filteredList" :key="item.id">
        {{ item.name }} ({{ item.category }})
      </li>
    </ul>
  </div>
</template>

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

// 类别数据
const contentCategories = ref(["Category 1", "Category 2", "Category 3", "Category 4"]);

// 追踪当前选中的类别
const selectedCategory = ref('');

// 处理按钮点击事件的函数
function handleClick(category) {
  if (selectedCategory.value === category) {
    selectedCategory.value = ''; // 切换：如果已选中，则取消选中
  } else {
    selectedCategory.value = category; // 选择新类别
  }
}

// 示例：根据 selectedCategory 过滤内容列表
const allItems = ref([
  { id: 1, name: 'Item A', category: 'Category 1' },
  { id: 2, name: 'Item B', category: 'Category 2' },
  { id: 3, name: 'Item C', category: 'Category 1' },
  { id: 4, name: 'Item D', category: 'Category 3' },
  { id: 5, name: 'Item E', category: 'Category 2' },
  { id: 6, name: 'Item F', category: 'Category 4' },
]);

const filteredList = computed(() => {
  if (selectedCategory.value === '') {
    return allItems.value; // 如果没有选中类别，显示所有内容
  }
  return allItems.value.filter(item => item.category === selectedCategory.value);
});
</script>

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

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

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

.filter-button.active {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
  font-weight: bold;
}

.content-list {
  margin-top: 20px;
  border: 1px solid #eee;
  padding: 15px;
  border-radius: 8px;
}

.content-list ul {
  list-style-type: none;
  padding: 0;
}

.content-list li {
  padding: 5px 0;
  border-bottom: 1px dotted #eee;
}

.content-list li:last-child {
  border-bottom: none;
}
</style>

const filteredList = computed(() => {
  if (selectedCategory.value === '') {
    return allItems.value; // 如果没有选中类别，显示所有内容
  }
  return allItems.value.filter(item => item.category === selectedCategory.value);
});