[TOC] >[success] # vue復選框邏輯 項目中有一個需求，要求4個按鈕，點擊每個按鈕就個數組中添加一個值，再次點擊時候如果數組中有這個值就需要刪除這個值，并且還要選中時候添加樣式，代碼如下： 1. html代碼部分： ~~~javascript <template> <div> <button :class="item.type ? 'style1' : 'style2'" v-for="(item,index) in list" :key="index" @click="clickBtn(item)"> {{item.title}} </button> </div> </template> ~~~ 2. vuejs代碼部分： ~~~javascript <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 } ], list2: [] } }, methods:{ clickBtn(val){ // 按鈕的樣式直接取反 val.type = !val.type // indexOf如果有值會返回這個值在數組中的索引值 let judgment= this.list2.indexOf(val.value) if(judgment !== -1){ this.list2.splice(judgment,1) }else{ this.list2.push(val.value) } } } } </script> ~~~ 3. css樣式部分： ~~~ <style> .style1{ background: red; } .style2{ background: blue } </style> ~~~