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

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

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

html

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>

javascript 复制代码

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

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，并在点击按钮时更新这个变量。然后，根据这个变量来设置每个按钮的选中状态。

html 复制代码

<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。