vue 的jsx语法

<script>
  const grids = new Array(8).fill(1).map((_, r) => {
    return new Array(8).fill(1).map((_, c) => {
      return {
        key: `key-${r * 8 + c}`,
        ok: false
      };
    });
  });
  export default {
    name: "app",
    data() {
      return {
        grids
      };
    },
    methods: {
      clickFlag(r_index,c_index) {
        this.grids[r_index][c_index].ok=!this.grids[r_index][c_index].ok;
      }
    },
    render() {
      return (
        <div class="grids">
          {this.grids.map((r, r_index) => (
            <div class="row" key={r_index}>
              {r.map((c, c_index) => (
                <div class="ceil" key={c_index} onClick={this.clickFlag.bind(this,r_index,c_index)}>
                  {c.ok ? <div>Q</div> : ""}
                </div>
              ))}
            </div>
          ))}
        </div>
      );
    },
    activated() {}
  };
</script>
<style>
  .grids {
    width: 400px;
    margin: 0 auto;
  }
  .ceil {
    width: 50px;
    height: 50px;
    float: left;
    line-height: 50px;
    text-align: center;
    background: #999;
    cursor: pointer;
  }
  .ceil:nth-child(2n) {
    background: #efefef;
  }
  .row {
    height: 50px;
    width: 400px;
    display: flow-root;
  }
  .row:nth-child(2n) .ceil:nth-child(2n) {
    background: #999;
  }
  .row:nth-child(2n) .ceil:nth-child(2n - 1) {
    background: #efefef;
  }
</style>