当前位置：首页 > VUE

vue按钮实现单选全选

2026-01-23 00:24:42VUE

Vue 按钮实现单选与全选功能

在 Vue 中实现单选和全选功能，可以通过以下方法完成：

单选功能实现

数据准备
定义一个数组 items 存储选项数据，并为每个选项添加 selected 属性控制选中状态：

data() {
  return {
    items: [
      { id: 1, name: '选项1', selected: false },
      { id: 2, name: '选项2', selected: false },
      { id: 3, name: '选项3', selected: false }
    ]
  }
}

单选逻辑
通过 v-model 绑定单选按钮，或通过点击事件切换选中状态：

<div v-for="item in items" :key="item.id">
  <input type="checkbox" v-model="item.selected" @change="handleSingleSelect(item)">
  {{ item.name }}
</div>

methods: {
  handleSingleSelect(item) {
    this.items.forEach(i => {
      if (i.id !== item.id) i.selected = false;
    });
  }
}

全选功能实现

全选按钮绑定
添加一个全选按钮，通过计算属性判断是否全选：
```
<input type="checkbox" v-model="allSelected" @change="handleSelectAll">
全选
```

全选逻辑
使用计算属性和方法实现全选与反选：

computed: {
  allSelected: {
    get() {
      return this.items.every(item => item.selected);
    },
    set(value) {
      this.items.forEach(item => item.selected = value);
    }
  }
},
methods: {
  handleSelectAll() {
    this.allSelected = !this.allSelected;
  }
}

完整示例代码

<template>
  <div>
    <div>
      <input type="checkbox" v-model="allSelected" @change="handleSelectAll">
      全选
    </div>
    <div v-for="item in items" :key="item.id">
      <input type="checkbox" v-model="item.selected" @change="handleSingleSelect(item)">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1', selected: false },
        { id: 2, name: '选项2', selected: false },
        { id: 3, name: '选项3', selected: false }
      ]
    }
  },
  computed: {
    allSelected: {
      get() {
        return this.items.every(item => item.selected);
      },
      set(value) {
        this.items.forEach(item => item.selected = value);
      }
    }
  },
  methods: {
    handleSingleSelect(item) {
      this.items.forEach(i => {
        if (i.id !== item.id) i.selected = false;
      });
    },
    handleSelectAll() {
      this.allSelected = !this.allSelected;
    }
  }
}
</script>