我需要選擇多個在點擊時動態顯示的按鈕。單擊的每個按鈕都需要更改顏色。再次單擊的任何按鈕都需要回傳舊顏色。我不能使用任何 HTML 屬性回呼或 Jquery。這只能使用樣式標簽、引導??程式或 vue。誰能幫幫我嗎？
當前設定：
<div>
<button class="btn btn-success" v-on:click="filterAll" style="margin:2px;">ALL</button>
<div class="btn-group btn-group-toggle" v-for="gen in genreArr" data-toggle="buttons">
<button class="btn btn-warning" v-on:click="filterOne(gen)" style="margin:2px;">{{gen}}</button>
</div>
</div>
老實說，如果有人能告訴我如何用一個按鈕來做到這一點，那會很有幫助。
uj5u.com熱心網友回復：
假設btn-warning該類具有color: red并且ten-success類具有color: green。現在只需單擊一下按鈕，您就可以在這些類之間切換。
維護一個陣列以包含每個按鈕的布林值
data() {
return {
clickBools = [false, false, false, false....], // upto number of genres
// other attributes
};
}
和一個方法
methods: {
filterOne(index) {
this.clickBools[index] = !this.clickBools[index];
}
}
并在模板中，進行以下更改
<div>
<button class="btn btn-success" v-on:click="filterAll" style="margin:2px;">ALL</button>
<div class="btn-group btn-group-toggle" v-for="(gen, index) in genreArr" data-toggle="buttons">
<button :class="['btn', {'btn-warning': !clickBools[index], 'btn-success': clickBools[index]}]" v-on:click="filterOne(index)" style="margin:2px;">{{gen}}</button>
</div>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/354912.html
標籤：javascript html Vue.js 按钮 bootstrap-4