[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> ~~~