当点击一个li标签时，它的颜色发生变化，代表被选中，vue3代码实现，setup在script里面

在Vue3中，你可以使用`<script setup>`语法配合`ref`、`on`和`watch`来实现在点击`li`标签时改变其背景色。这里是一个简单的例子：

首先，在HTML部分，创建一个列表并给每个`li`标签一个唯一的ID：

<template>
  <ul id="list">
    <li v-for="(item, index) in items" :key="index" @click="selectItem(index)">
      {{ item }}
    </li>
  </ul>
</template>

然后，在`<script setup>`部分编写相关逻辑：

import { ref, onMounted, watch } from 'vue';

const listItems = ref([]); // 假设items是你的数据源
let selectedItem = -1; // 初始化未选中

function selectItem(index) {
  if (selectedItem !== index) {
    // 如果当前不是选中项，更改背景色和选中项
    listItems.value.forEach((item, i) => {
      if (i === selectedItem) {
        item.classList.remove('selected'); // 移除旧选中的样式
      } else if (i === index) {
        item.classList.add('selected'); // 添加新选中的样式
        selectedItem = index;
      }
    });
  }
}

onMounted(() => {
  // 初始加载时设置默认选中项
  selectItem(0);
})

// 如果items的数据源有变化，这个watch会自动更新
watch(listItems, () => {
  selectItem(selectedItem);
});

在这个例子中，我们使用了`ref`来存储列表项，并且在`selectItem`函数中处理点击事件，当点击新的`li`时，我们会切换所有`li`的样式，将非当前项的颜色恢复原样，当前项变为选中。

别忘了导入Vue的`ref`, `onMounted`和`watch`模块，并确保你的项目已经安装了Vue3。