首先这是一个Vue3 <script setup></script>应用，其次在<p></p>标签中的<span></span>中遍历['当前','最新']这个数组，并且两个<span></span>都带有点击属性，默认颜色文字为黑色，当个<span></span>被点击时其文字变为蓝色，另一个标签的文字颜色不改变，当点击另一个标签时，原来标签蓝色文字改为黑色，被点击标签变为蓝色，实现点击切换的功能

好的，我理解了你的需求。以下是详细的步骤和代码实现：

1. 在 Vue3 的 <script setup></script> 区域中，定义一个 data() 属性，初始化一个名为textArr的数组，并且定义一个activeIndex属性，用于记录当前被选中的标签的索引。

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

const textArr = ref(['当前', '最新'])
const activeIndex = ref(0)
</script>

2. 在模板中使用 v-for 指令遍历 textArr 数组，生成两个 <span> 标签，并添加对应的点击事件。

<template>
  <div>
    <p>
      <span :class="{active: activeIndex === 0}" @click="onLabelClick(0)">{{ textArr[0] }}</span>
      <span :class="{active: activeIndex === 1}" @click="onLabelClick(1)">{{ textArr[1] }}</span>
    </p>
  </div>
</template>

3. 添加 onLabelClick() 方法，用于处理标签的切换逻辑。该方法接收一个参数 index，表示当前被点击的标签的索引。

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

const textArr = ref(['当前', '最新'])
const activeIndex = ref(0)

const onLabelClick = (index) => {
  if (index === activeIndex.value) {
    return
  }
  activeIndex.value = index
}
</script>

4. 添加样式表，并定义 active 类，用于高亮当前选中的标签。默认文字颜色为黑色，选中的文字颜色为蓝色。

<style scoped>
span {
  color: black;
  cursor: pointer;
}

.active {
  color: blue;
}
</style>

这样，我们就完成了标签点击切换文字颜色的功能。完整的代码如下：

<template>
  <div>
    <p>
      <span :class="{active: activeIndex === 0}" @click="onLabelClick(0)">{{ textArr[0] }}</span>
      <span :class="{active: activeIndex === 1}" @click="onLabelClick(1)">{{ textArr[1] }}</span>
    </p>
  </div>
</template>

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

const textArr = ref(['当前', '最新'])
const activeIndex = ref(0)

const onLabelClick = (index) => {
  if (index === activeIndex.value) {
    return
  }
  activeIndex.value = index
}
</script>

<style scoped>
span {
  color: black;
  cursor: pointer;
}

.active {
  color: blue;
}
</style>