<div id="app">
  <section class="blocks" v-for="(b, i) in blocks" :key="i">
    <h2>{{b.name}}</h2>
    <div class="block__info">
      <div class="block__item" v-for="(d, j) in b.data" :key="j">
        <table>
          <tr v-for="(h, hi) in d" :key="hi">
            <td v-for="(v, vi) in h" :key="vi" class="block" :class="v | blockClass"></td>
          </tr>
        </table>
      </div>
    </div>
   
  </section>
</div>

body {
  background: #333;
  padding: 20px;
}

.block {
  width: 30px;
  height: 30px;
  background: #252525;
  border: 0.1px solid rgba(0, 0, 0, 0.2);
  &-i {
    background: #3498db;
  }
  &-o {
    background: #f1c40f;
  }
  &-t {
    background: #9b59b6;
  }
  &-j {
    background: #1e3799;
  }
  &-l {
    background: #e67e22;
  }
  &-s {
    background: #2ecc71;
  }
  &-z {
    background: #e74c3c;
  }
  &__info {
    display: flex;
  }
  &__item {
    padding: 20px;
    background: #222;
  }
}

h2 {
  color: #fff;
  font-size: 20px;
  margin-top: 30px;
  margin-bottom: 10px;
}

const blocks = {
  1: {
    name: 'I-テトリスミノ',
    data: [
      [
        [0, 0, 1, 0, 0],
        [0, 0, 1, 0, 0],
        [0, 0, 1, 0, 0],
        [0, 0, 1, 0, 0],
        [0, 0, 0, 0, 0],
      ], [
        [0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0],
        [1, 1, 1, 1, 0],
        [0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0],
      ], [
        [0, 0, 0, 0, 0],
        [0, 0, 1, 0, 0],
        [0, 0, 1, 0, 0],
        [0, 0, 1, 0, 0],
        [0, 0, 1, 0, 0],
      ], [
        [0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0],
        [0, 1, 1, 1, 1],
        [0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0],
      ]
    ],
  },
  2: {
    name: "O-テトリスミノ",
    data: [
      [
        [0, 0, 0, 0, 0],
        [0, 0, 2, 2, 0],
        [0, 0, 2, 2, 0],
        [0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0],
      ], [
        [0, 0, 0, 0, 0],
        [0, 0, 2, 2, 0],
        [0, 0, 2, 2, 0],
        [0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0],
      ], [
        [0, 0, 0, 0, 0],
        [0, 0, 2, 2, 0],
        [0, 0, 2, 2, 0],
        [0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0],
      ], [
        [0, 0, 0, 0, 0],
        [0, 0, 2, 2, 0],
        [0, 0, 2, 2, 0],
        [0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0],
      ]
    ],
  },
  3: {
    name: "T-テトリスミノ",
    data: [
      [
        [0, 0, 0, 0, 0],
        [0, 0, 3, 0, 0],
        [0, 3, 3, 3, 0],
        [0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0],
      ], [
        [0, 0, 0, 0, 0],
        [0, 0, 3, 0, 0],
        [0, 3, 3, 0, 0],
        [0, 0, 3, 0, 0],
        [0, 0, 0, 0, 0],
      ], [
        [0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0],
        [0, 3, 3, 3, 0],
        [0, 0, 3, 0, 0],
        [0, 0, 0, 0, 0],
      ], [
        [0, 0, 0, 0, 0],
        [0, 0, 3, 0, 0],
        [0, 0, 3, 3, 0],
        [0, 0, 3, 0, 0],
        [0, 0, 0, 0, 0],
      ]
    ],
  },
  4: {
    name: "J-テトリスミノ",
    data: [
      [
        [0, 0, 0, 0, 0],
        [0, 0, 4, 0, 0],
        [0, 0, 4, 0, 0],
        [0, 4, 4, 0, 0],
        [0, 0, 0, 0, 0],
      ], [
        [0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0],
        [0, 4, 4, 4, 0],
        [0, 0, 0, 4, 0],
        [0, 0, 0, 0, 0],
      ], [
        [0, 0, 0, 0, 0],
        [0, 0, 4, 4, 0],
        [0, 0, 4, 0, 0],
        [0, 0, 4, 0, 0],
        [0, 0, 0, 0, 0],
      ], [
        [0, 0, 0, 0, 0],
        [0, 4, 0, 0, 0],
        [0, 4, 4, 4, 0],
        [0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0],
      ]
    ],
  },
  5: {
    name: 'L-テトリスミノ',
    data: [
      [
        [0, 0, 0, 0, 0],
        [0, 0, 5, 0, 0],
        [0, 0, 5, 0, 0],
        [0, 0, 5, 5, 0],
        [0, 0, 0, 0, 0],
      ], [
        [0, 0, 0, 0, 0],
        [0, 0, 0, 5, 0],
        [0, 5, 5, 5, 0],
        [0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0],
      ], [
        [0, 0, 0, 0, 0],
        [0, 5, 5, 0, 0],
        [0, 0, 5, 0, 0],
        [0, 0, 5, 0, 0],
        [0, 0, 0, 0, 0],
      ], [
        [0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0],
        [0, 5, 5, 5, 0],
        [0, 5, 0, 0, 0],
        [0, 0, 0, 0, 0],
      ]
    ],
  },
  6: {
    name: 'S-テトリスミノ',
    data: [
      [
        [0, 0, 0, 0, 0],
        [0, 0, 6, 6, 0],
        [0, 6, 6, 0, 0],
        [0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0],
      ], [
        [0, 0, 0, 0, 0],
        [0, 6, 0, 0, 0],
        [0, 6, 6, 0, 0],
        [0, 0, 6, 0, 0],
        [0, 0, 0, 0, 0],
      ], [
        [0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0],
        [0, 0, 6, 6, 0],
        [0, 6, 6, 0, 0],
        [0, 0, 0, 0, 0],
      ], [
        [0, 0, 0, 0, 0],
        [0, 6, 0, 0, 0],
        [0, 6, 6, 0, 0],
        [0, 0, 6, 0, 0],
        [0, 0, 0, 0, 0],
      ]
    ],
  },
  7: {
    name: "Z-テトリスミノ",
    data: [
      [
        [0, 0, 0, 0, 0],
        [0, 7, 7, 0, 0],
        [0, 0, 7, 7, 0],
        [0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0],
      ], [
        [0, 0, 0, 0, 0],
        [0, 0, 7, 0, 0],
        [0, 7, 7, 0, 0],
        [0, 7, 0, 0, 0],
        [0, 0, 0, 0, 0],
      ], [
        [0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0],
        [0, 7, 7, 0, 0],
        [0, 0, 7, 7, 0],
        [0, 0, 0, 0, 0],
      ], [
        [0, 0, 0, 0, 0],
        [0, 0, 0, 7, 0],
        [0, 0, 7, 7, 0],
        [0, 0, 7, 0, 0],
        [0, 0, 0, 0, 0],
      ]
    ]
  }
}

const app = new Vue( {
  el: '#app',
  data: {
    blocks: blocks
  },
  filters: {
    blockClass(val) {
      switch(val) {
        case 1: return 'block-i';
        case 2: return 'block-o';
        case 3: return 'block-t';
        case 4: return 'block-j';
        case 5: return 'block-l';
        case 6: return 'block-s';
        case 7: return 'block-z';
        default: return '';
      }
    }
  },
})