请使用 组合式 element pus 单选框+v-for 实现循环 div 并且 点击选择当前div

在Vue.js中，你可以使用v-for指令配合`<template>`标签和单选按钮`<el-radio>`来实现这个需求。假设你有一个数组items需要遍历，并且每个元素都有一个值作为选项，你可以这样做：

<template>
  <div class="container">
    <el-radio-group v-model="selectedItem" @change="handleChange">
      <div v-for="(item, index) in items" :key="index">
        <div class="item" @click="toggleSelection(index)">
          <el-radio :label="item.value">{{ item.label }}</el-radio>
        </div>
      </div>
    </el-radio-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        // 更多选项...
      ],
      selectedItem: null,
    };
  },
  methods: {
    toggleSelection(index) {
      this.items.forEach((item, i) => (i !== index && (item.selected = false)));
      this.items[index].selected = true;
    },
    handleChange(value) {
      this.selectedItem = value; // 更新selectedItem的值
    },
  },
};
</script>

<style scoped>
.container {
  /* 根据你的样式定制容器样式 */
}
.item {
  /* 遍历项的基本样式，如点击背景颜色变化等 */
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.item:hover {
  background-color: lightgray;
}
</style>

在这个例子中，`v-model`绑定到`selectedItem`来跟踪当前选中的单选框，`@change`事件处理函数`handleChange`会在用户选择新的选项时更新`selectedItem`。而`toggleSelection`方法则是用于切换每个`item`的选中状态。