箭头按钮，点击以显示/隐藏固定的内容。

### 实现思路：
- 使用 Vue 的 `ref` 来存储每组的显示状态。
- 使用 `v-if` 控制内容的显示与隐藏。
- 使用 `v-bind` 来动态切换箭头的样式。

### 完整的 Vue 3 示例代码：

```vue
<template>
  <div class="container">
    <!-- 第一组 -->
    <div class="group">
      <button @click="toggleVisibility(0)">
        <span v-if="visible[0]">↑</span>
        <span v-else>↓</span>
      </button>
      <div v-if="visible[0]" class="content">
        <p>这是第一组的内容行 1</p>
        <p>这是第一组的内容行 2</p>
        <p>这是第一组的内容行 3</p>
      </div>
    </div>

    <!-- 第二组 -->
    <div class="group">
      <button @click="toggleVisibility(1)">
        <span v-if="visible[1]">↑</span>
        <span v-else>↓</span>
      </button>
      <div v-if="visible[1]" class="content">
        <p>这是第二组的内容行 1</p>
        <p>这是第二组的内容行 2</p>
        <p>这是第二组的内容行 3</p>
      </div>
    </div>

    <!-- 第三组 -->
    <div class="group">
      <button @click="toggleVisibility(2)">
        <span v-if="visible[2]">↑</span>
        <span v-else>↓</span>
      </button>
      <div v-if="visible[2]" class="content">
        <p>这是第三组的内容行 1</p>
        <p>这是第三组的内容行 2</p>
        <p>这是第三组的内容行 3</p>
      </div>
    </div>
  </div>
</template>

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

// 每个组的显示状态，初始化为显示内容
const visible = ref([true, true, true]);

// 切换显示内容的函数
function toggleVisibility(index) {
  visible.value[index] = !visible.value[index];
}
</script>

<style scoped>
.container {
  margin: 20px;
}

.group {
  margin-bottom: 10px;
}

button {
  font-size: 20px;
  background: none;
  border: none;
  cursor: pointer;
}

.content {
  margin-top: 10px;
  padding: 10px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
}
</style>
```

### 解释：
1. **HTML 结构**：
   - 每一组都有一个按钮用于切换箭头（`↑` 和 `↓`）。
   - 每一组下方有三行内容，内容默认显示（通过 `v-if` 控制显示状态）。

2. **Vue 数据部分**：
   - 使用 `ref` 定义 `visible` 数组，存储三个组的显示状态（`true` 表示显示，`false` 表示隐藏）。
   - `toggleVisibility` 函数接收一个索引，切换对应组的显示状态。

3. **CSS 样式**：
   - 给容器、按钮和内容部分添加了一些简单的样式，您可以根据需要进行自定义调整。

### 行为：
- 初始状态下，所有的内容组都可见，并且按钮显示向上箭头 `↑`。
- 当点击按钮时，箭头会切换为向下箭头 `↓`，并且该组的内容将被隐藏。
- 再次点击按钮时，箭头切换回向上箭头 `↑`，并且显示被隐藏的内容。

### 如何使用：
1. 将该代码复制到 Vue 3 项目的 `.vue` 文件中（例如 `App.vue`）。
2. 使用 `npm run serve` 或 `yarn serve` 启动 Vue 应用，打开浏览器访问即可看到效果。

### 总结：
这个示例展示了如何在 Vue 3 中创建动态切换显示与隐藏内容的功能，利用箭头按钮来控制每一组内容的显示/隐藏状态。您可以通过调整 `visible` 数组来控制每一组的显示状态，并根据需要定制样式和内容。