前端 Vue.js 实践 一维数组的二维贴图 两种方式

HTML

<div class="panel">
	<div v-for="col in 100" class="col-item" :key="col" :class="{'style1': isObject(col, 1), 'style2': isObject(col, 2),......}" :style="objectStyle (col)"></div>
</div>

data

data () {
	return {
		map: [1, 2, 3, 4, 0, 0, 0, 0, 0, 0,
	          0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
	          0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
	          0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
	          0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
	          0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
	          0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
	          0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
	          0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
	          0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
	}
}

methods

methods: {
	isObject (col, num) {
      return this.map[col - 1] === num
    },
}

computed

computed: {
    objectStyle () {
      return function (col) {
        switch (this.map[col - 1]) {
          case 3:
            return "background: XXXXXXXXXXXXXXXX"
          case 4:
            return "background: XXXXXXXXXXXXXXXX"
          ......
          ......
          default:
            break
        }
      }
    }
  }

CSS

.game-panel {
  position: relative;
  margin: auto;
  width: 500px;
  height: 500px;
  overflow: hidden;
  line-height: 0;
}

.col-item {
  background: XXXXXXXXXXX;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.style1 {
  background: XXXXXXXXXXX;
}

.style2 {
  background: XXXXXXXXXXX;
}

......
......

效果图

略