vue按钮实现单选全选

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

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

单选功能实现

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

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

2. 单选逻辑
   通过 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;
       });
     }
   }

全选功能实现

1. 全选按钮绑定
   添加一个全选按钮，通过计算属性判断是否全选：

   <input type="checkbox" v-model="allSelected" @change="handleSelectAll">
   全选

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

   

   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>

关键点说明

• 单选：通过遍历数组取消其他选项的选中状态，确保每次仅选中一项。
• 全选：利用计算属性的 get 和 set 方法，实现全选与反选功能。
• 双向绑定：v-model 简化了状态管理，直接绑定到数据属性。