当前位置：首页 > VUE

vue实现列表单选

2026-01-20 13:29:02VUE

实现列表单选的方法

在Vue中实现列表单选功能，可以通过多种方式完成。以下是几种常见的实现方法：

使用v-model绑定单选值

通过v-model绑定一个变量来存储当前选中的项，结合v-for渲染列表项，利用radio或自定义样式实现单选效果。

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

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

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

使用原生radio输入

利用HTML原生radio输入元素实现单选功能，通过v-model绑定值。

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

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

使用计算属性管理选中状态

通过计算属性来管理选中状态，提供更灵活的控制。

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

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' }
      ],
      selectedItem: null
    }
  },
  methods: {
    selectItem(item) {
      this.selectedItem = item
    },
    isSelected(item) {
      return this.selectedItem && this.selectedItem.id === item.id
    }
  }
}
</script>

注意事项

确保为每个列表项设置唯一的key值
根据需求选择合适的实现方式（自定义样式或原生radio）
单选功能通常需要配合样式来直观显示选中状态
在复杂场景中，可以考虑使用Vuex或provide/inject来管理选中状态

扩展实现

对于更复杂的需求，可以创建一个可复用的单选列表组件：

<template>
  <div class="radio-list">
    <div 
      v-for="item in items" 
      :key="item[keyProp]"
      class="radio-item"
      :class="{ 'active': isActive(item) }"
      @click="selectItem(item)"
    >
      <slot :item="item">
        {{ item[labelProp] }}
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true
    },
    value: {
      type: [Object, String, Number],
      default: null
    },
    keyProp: {
      type: String,
      default: 'id'
    },
    labelProp: {
      type: String,
      default: 'name'
    }
  },
  methods: {
    selectItem(item) {
      this.$emit('input', item)
    },
    isActive(item) {
      if (!this.value) return false
      return this.value[this.keyProp] === item[this.keyProp]
    }
  }
}
</script>

这种方式提供了更大的灵活性，支持插槽和自定义属性名。

vue实现列表单选