vue实现列表单选

实现列表单选的基本思路

在Vue中实现列表单选功能，可以通过v-model绑定选中项，结合v-for渲染列表项。核心是维护一个响应式变量存储当前选中的值，并通过点击事件更新该变量。

基础实现代码示例

<template>
  <div>
    <div 
      v-for="item in list" 
      :key="item.id"
      @click="selected = item.id"
      :class="{ 'active': selected === item.id }"
    >
      {{ item.text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, text: '选项1' },
        { id: 2, text: '选项2' },
        { id: 3, text: '选项3' }
      ],
      selected: null
    }
  }
}
</script>

<style>
.active {
  background-color: #eee;
}
</style>

使用单选框(input radio)的实现方式

<template>
  <div>
    <label v-for="item in list" :key="item.id">
      <input 
        type="radio" 
        :value="item.id" 
        v-model="selected"
      >
      {{ item.text }}
    </label>
  </div>
</template>

对象类型选项的处理

当选项是对象而非简单值时，可以使用v-model绑定整个对象：

<template>
  <div>
    <div 
      v-for="item in list" 
      :key="item.id"
      @click="selectedItem = item"
      :class="{ 'active': selectedItem?.id === item.id }"
    >
      {{ item.text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedItem: null,
      list: [
        { id: 1, text: '选项1' },
        { id: 2, text: '选项2' },
        { id: 3, text: '选项3' }
      ]
    }
  }
}
</script>

使用计算属性优化

可以通过计算属性判断当前是否选中，使模板更简洁：

<template>
  <div>
    <div 
      v-for="item in list" 
      :key="item.id"
      @click="selected = item.id"
      :class="{ 'active': isSelected(item.id) }"
    >
      {{ item.text }}
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    isSelected() {
      return (id) => this.selected === id
    }
  }
}
</script>

组件化实现

对于复用场景，可以封装为单选列表组件：

<!-- RadioList.vue -->
<template>
  <div>
    <div 
      v-for="item in items" 
      :key="item[valueKey]"
      @click="$emit('update:modelValue', item[valueKey])"
      :class="{ 'active': modelValue === item[valueKey] }"
    >
      {{ item[textKey] }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    items: Array,
    modelValue: [String, Number],
    valueKey: {
      type: String,
      default: 'id'
    },
    textKey: {
      type: String,
      default: 'text'
    }
  },
  emits: ['update:modelValue']
}
</script>

使用方式：

<radio-list 
  v-model="selectedId"
  :items="list"
/>