[TOC] >[success] # vue单选框逻辑 vue自定义单选框的逻辑 ~~~ <template> <!-- 单选逻辑 --> <div> <button :class="active===index ? 'style1' : 'style2'" v-for="(item,index) in list" :key="index" @click="clickBtn(index,item)" >{{item.title}}</button> 传给接口的值{{ value }} </div> </template> <script> export default { data() { return { list: [ { title: "按钮1", value: "btn1", type: false }, { title: "按钮2", value: "btn2", type: false }, { title: "按钮3", value: "btn3", type: false }, { title: "按钮4", value: "btn4", type: false } ], active: -1, value: "" }; }, methods: { clickBtn(index, item) { if (this.active === index) { this.active = -1; this.value = ""; } else { this.active = index; this.value = item.value; } } } }; </script> <style> .style1 { background: red; } .style2 { background: blue; } </style> ~~~