当前位置：首页 > VUE

vue 实现列表单选

2026-02-24 09:28:12VUE

实现列表单选的方法

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

使用v-model和v-for

通过v-model绑定选中的值，结合v-for渲染列表项，实现单选效果。

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

<script>
export default {
  data() {
    return {
      selectedItem: '',
      items: [
        { id: '1', value: 'option1', label: 'Option 1' },
        { id: '2', value: 'option2', label: 'Option 2' },
        { id: '3', value: 'option3', label: 'Option 3' }
      ]
    }
  }
}
</script>

使用计算属性和点击事件

vue 实现列表单选

通过计算属性和点击事件手动管理选中状态，适用于更复杂的场景。

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

<script>
export default {
  data() {
    return {
      selectedItem: null,
      items: [
        { id: '1', label: 'Option 1' },
        { id: '2', label: 'Option 2' },
        { id: '3', label: 'Option 3' }
      ]
    }
  },
  methods: {
    selectItem(item) {
      this.selectedItem = item
    }
  }
}
</script>

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

使用第三方组件库

vue 实现列表单选

对于更复杂的需求，可以使用第三方UI组件库如Element UI或Vuetify提供的单选组件。

<template>
  <el-radio-group v-model="selectedItem">
    <el-radio 
      v-for="item in items" 
      :key="item.id" 
      :label="item.value"
    >
      {{ item.label }}
    </el-radio>
  </el-radio-group>
</template>

<script>
export default {
  data() {
    return {
      selectedItem: '',
      items: [
        { id: '1', value: 'option1', label: 'Option 1' },
        { id: '2', value: 'option2', label: 'Option 2' },
        { id: '3', value: 'option3', label: 'Option 3' }
      ]
    }
  }
}
</script>