当前位置：首页 > VUE

vue中实现排它

2026-02-21 11:03:54VUE

Vue 中实现排他逻辑的方法

在 Vue 中实现排他逻辑（即多个元素中只能有一个被选中或激活）可以通过多种方式实现。以下是几种常见的实现方法：

使用 v-model 和计算属性

通过绑定一个共同的变量，结合计算属性或方法来控制排他状态。

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

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

使用 v-model 和单选框

利用单选框的排他特性，结合 v-model 实现。

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Option 1' },
        { id: 2, name: 'Option 2' },
        { id: 3, name: 'Option 3' }
      ],
      selectedItem: null
    }
  }
}
</script>

使用 Vuex 或 Pinia 管理状态

如果需要在多个组件之间共享排他状态，可以使用状态管理工具。

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

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Option 1' },
        { id: 2, name: 'Option 2' },
        { id: 3, name: 'Option 3' }
      ]
    }
  },
  computed: {
    ...mapState(['selectedItem'])
  },
  methods: {
    ...mapMutations(['setSelectedItem'])
  }
}
</script>

使用动态组件实现排他显示

通过动态组件切换实现排他显示。

vue中实现排它

<template>
  <div>
    <button 
      v-for="item in items" 
      :key="item.id" 
      @click="currentComponent = item.component"
    >
      {{ item.name }}
    </button>
    <component :is="currentComponent" />
  </div>
</template>

<script>
import Component1 from './Component1.vue'
import Component2 from './Component2.vue'
import Component3 from './Component3.vue'

export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Option 1', component: Component1 },
        { id: 2, name: 'Option 2', component: Component2 },
        { id: 3, name: 'Option 3', component: Component3 }
      ],
      currentComponent: null
    }
  }
}
</script>