【Vue.js】配列のデータによって背景色を変える方法を教えていただきたいです。

知りたいこと

Vue.jsを使い、配列の中身が1なら背景色をつけ、0ならなにもつけないようにしたいです。
そのことで配列の形で自在にブロックの形を作りたいと思っています。

現在のコード

HTML記述

          <div v-for="(block, bi) in blocks" :key="bi">
            <table>
              <tr v-for="(blockTR, yi) in block" :key="yi" class="TR">
                <td v-for="(blockTD, xi) in blockTR" :key="xi" :class="TD">
                </td>
              </tr>
            </table>
          </div>

Vue.js記述

        const app = new Vue({
          el: '#app',
          data: {
            TD:"blockColor",
            blocks:[
              [
                [0, 1, 1],
                [0, 1, 1],
                [0, 0, 0],
              ],
              [
                [1, 1, 1],
                [0, 1, 0],
                [0, 1, 0],
              ],
            ]
          },
        })

試したこと

<td>のclassにバインドして背景色をつけることはできましたが、その背景色を条件によって変化させる方法がわかりませんでした。無知で申し訳ありませんが、ご教授お願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

スタイルバインドのほうでの変更はいかがでしょうか？
下記のような形です。（TDのほうだけ行っております。）

html
1          <div v-for="(block, bi) in blocks" :key="bi">
2            <table>
3              <tr v-for="(blockTR, yi) in block" :key="yi" class="TR">
4                <td v-for="(blockTD, xi) in blockTR" :key="xi" :style="makeColor(blockTD)">
5                </td>
6              </tr>
7            </table>
8          </div>

javascript
1        const app = new Vue({
2          el: '#app',
3          data: {
4            blocks:[
5              [
6                [0, 1, 1],
7                [0, 1, 1],
8                [0, 0, 0],
9              ],
10              [
11                [1, 1, 1],
12                [0, 1, 0],
13                [0, 1, 0],
14              ],
15            ]
16          },
17          methods: {
18            // 背景色の判定によって値を返す（0なら白、1なら黒にしてますが、何でもよいです。）
19            makeColor (value) {
20              return {
21                'background': value === 0 ? 'white' : 'black'
22              }
23            }
24          }
25        })