用vue3实现单选的功能，并且变换背景颜色

你可以使用 Vue 3 来实现单选功能，并且通过变换背景颜色来表示选中状态。下面是一个简单的示例代码：

<template>
  <div>
    <div v-for="option in options" :key="option.id">
      <label :for="option.id">
        <input type="radio" :id="option.id" v-model="selectedOption" :value="option.id">
        {{ option.label }}
      </label>
    </div>
    <div :style="{ background: selectedOption ? 'green' : 'red' }">
      {{ selectedOption ? '选中了 ' + selectedOption : '未选中任何选项' }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { id: 1, label: '选项1' },
        { id: 2, label: '选项2' },
        { id: 3, label: '选项3' }
      ],
      selectedOption: null
    };
  }
};
</script>

在上述代码中，我们首先使用 `v-for` 指令来渲染选项列表。每个选项都有一个唯一的 `id` 和对应的标签文本。我们将每个单选框绑定到 `selectedOption` 变量上，并设置其值为对应选项的 `id`。通过使用 `v-model` 指令，我们可以轻松地实现单选功能。

接下来，我们使用条件渲染来根据 `selectedOption` 的值来改变背景颜色。如果 `selectedOption` 有值（即选中了某个选项），则背景颜色为绿色；否则，背景颜色为红色。

最后，我们在页面上显示当前选中的选项，如果没有选中任何选项，则显示相应的提示信息。

请注意，这只是一个简单的示例，你可以根据自己的需求进行修改和扩展。