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。