vue 网格列表

vue 网格列表

代码：

<!--  -->
<template>
  <div class=''>
    <div>
      <el-row :gutter="20" style="margin-bottom: 20px">
        <el-col :span="6" v-for="(item,index) in list" :key="index">
          <div class="item" style="margin-bottom: 20px">
            {{ item }}
          </div>
        </el-col>
      </el-row>
    </div>
  </div>


</template>

<script>


export default {
  name: 'home',
  data() {

    return {
      list: [],
    };
  },

  methods: {},

  created() {
    for (let i = 0; i < 28; i++) {
      this.list.push(i)
    }
  }

}
</script>
<style scoped>

.item {
  height: 280px;
  background-color: #0cc13a;
  color: #ffffff;
  line-height: 280px;
  font-size: 30px;
  text-align: center;
}
</style>

效果：