js-vue中多个按钮状态选中类似于复选框与单选框实现

1.vue中多个按钮状态选中类似于复选框

在Vue中处理多个按钮的选中状态切换，通常我们会利用Vue的响应式数据系统来追踪每个按钮的选中状态。

  html

<div id="app">  <button  v-for="button in buttons"  :key="button.id"  :class="{ active: button.isSelected }"  @click="toggleSelection(button.id)"  >  {{ button.text }}  </button>  
</div>

js

new Vue({  el: '#app',  data: {  buttons: [  { id: 1, text: '按钮1', isSelected: false },  { id: 2, text: '按钮2', isSelected: false },  { id: 3, text: '按钮3', isSelected: false }  ]  },  methods: {  toggleSelection(id) {  // 找到并点击的按钮并切换其选中状态  this.buttons.forEach(button => {  if (button.id === id) {  button.isSelected = !button.isSelected;  }  });  }  }  
});

 css

new Vue({  el: '#app',  data: {  buttons: [  { id: 1, text: '按钮1', isSelected: false },  { id: 2, text: '按钮2', isSelected: false },  { id: 3, text: '按钮3', isSelected: false }  ]  },  methods: {  toggleSelection(id) {  // 找到并点击的按钮并切换其选中状态  this.buttons.forEach(button => {  if (button.id === id) {  button.isSelected = !button.isSelected;  }  });  }  }  
});

        定义一个buttons数组，其中包含了每个按钮的id、text（按钮上显示的文本）和isSelected（按钮的选中状态）。

        使用v-for指令来遍历buttons数组，并为每个按钮绑定了一个点击事件处理器toggleSelection，该处理器接收按钮的id作为参数。当按钮被点击时，toggleSelection方法会根据id找到对应的按钮，并切换其isSelected属性的值。

        使用:class绑定来根据按钮的isSelected状态动态添加active类，以改变按钮的样式来表示其选中状态。

2.vue中多个按钮状态选中类似于单选框

        实现类似单选框的功能，即在一组按钮中只能同时选中一个，你可以通过维护一个变量来记录当前选中的按钮的id，并在点击按钮时更新这个变量。然后，根据这个变量来设置每个按钮的选中状态。 

<div id="app">  <button  v-for="button in buttons"  :key="button.id"  :class="{ active: selectedButtonId === button.id }"  @click="selectButton(button.id)"  >  {{ button.text }}  </button>  
</div>  <script>  
new Vue({  el: '#app',  data: {  buttons: [  { id: 1, text: '按钮1' },  { id: 2, text: '按钮2' },  { id: 3, text: '按钮3' }  ],  selectedButtonId: null // 用来记录当前选中的按钮的id  },  methods: {  selectButton(id) {  // 更新当前选中的按钮id  this.selectedButtonId = id;  }  }  
});  
</script>  <style>  
.active {  background-color: blue;  color: white;  
}  
</style>

  buttons数组包含了所有按钮的信息，而selectedButtonId变量用于跟踪当前选中的按钮的id。每个按钮都绑定了一个点击事件处理器selectButton，当按钮被点击时，该处理器会更新selectedButtonId的值为被点击按钮的id。