vue实现div单选

Vue 实现 Div 单选的方法

使用 v-model 和计算属性

通过 v-model 绑定选中的值，结合计算属性动态更新样式。

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

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

<style>
.active {
  background-color: #42b983;
  color: white;
}
</style>

使用自定义组件

封装一个可复用的单选组件，通过 props 和 $emit 实现数据传递。

<template>
  <div>
    <radio-group v-model="selected">
      <radio-item 
        v-for="item in items" 
        :key="item.id" 
        :value="item.id"
      >
        {{ item.text }}
      </radio-item>
    </radio-group>
  </div>
</template>

<script>
import RadioGroup from './RadioGroup.vue'
import RadioItem from './RadioItem.vue'

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

使用第三方库

如果需要更复杂的功能，可以使用如 v-radio 等第三方库。

<template>
  <v-radio-group v-model="selected">
    <v-radio 
      v-for="item in items" 
      :key="item.id" 
      :label="item.text" 
      :value="item.id"
    />
  </v-radio-group>
</template>

<script>
import { VRadioGroup, VRadio } from 'vue-radios'

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

动态样式绑定

通过动态绑定 class 或 style 实现选中效果。

<template>
  <div>
    <div 
      v-for="item in items" 
      :key="item.id"
      @click="selected = item.id"
      :style="{
        backgroundColor: selected === item.id ? '#42b983' : '',
        color: selected === item.id ? 'white' : ''
      }"
    >
      {{ item.text }}
    </div>
  </div>
</template>

使用事件总线

跨组件通信时，可以通过事件总线实现单选功能。

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

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

<script>
import { EventBus } from './event-bus.js'

export default {
  data() {
    return {
      selected: null,
      items: [
        { id: 1, text: '选项1' },
        { id: 2, text: '选项2' },
        { id: 3, text: '选项3' }
      ]
    }
  },
  methods: {
    selectItem(id) {
      EventBus.$emit('item-selected', id)
    }
  },
  created() {
    EventBus.$on('item-selected', id => {
      this.selected = id
    })
  }
}
</script>