vue实现循环盒子

实现循环盒子的方法

在Vue中实现循环盒子通常使用v-for指令，可以循环渲染数组或对象中的元素。

基础数组循环

使用v-for遍历数组，为每个元素生成一个盒子：

<template>
  <div class="container">
    <div v-for="(item, index) in items" :key="index" class="box">
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Box 1', 'Box 2', 'Box 3', 'Box 4']
    }
  }
}
</script>

<style>
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

对象属性循环

也可以循环对象的属性：

<template>
  <div class="container">
    <div v-for="(value, key) in objectItems" :key="key" class="box">
      {{ key }}: {{ value }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      objectItems: {
        name: 'Box A',
        size: 'Medium',
        color: 'Blue'
      }
    }
  }
}
</script>

带索引的循环

需要索引时可以使用第二个参数：

<div v-for="(item, index) in items" :key="index">
  第{{ index + 1 }}个盒子: {{ item }}
</div>

使用计算属性

当需要对数据进行处理后再循环时：

<template>
  <div v-for="item in filteredItems" :key="item.id" class="box">
    {{ item.name }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      allItems: [
        { id: 1, name: 'Box X' },
        { id: 2, name: 'Box Y' },
        { id: 3, name: 'Box Z' }
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.allItems.filter(item => item.id > 1)
    }
  }
}
</script>

嵌套循环

实现多维数据的循环盒子：

<template>
  <div v-for="(row, rowIndex) in matrix" :key="rowIndex" class="row">
    <div v-for="(cell, colIndex) in row" :key="colIndex" class="cell">
      {{ cell }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      matrix: [
        [1, 2, 3],
        [4, 5, 6],
        [7, 8, 9]
      ]
    }
  }
}
</script>

<style>
.row {
  display: flex;
}
.cell {
  width: 50px;
  height: 50px;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

动态样式绑定

根据循环数据动态设置盒子样式：

<template>
  <div v-for="item in styledItems" :key="item.id" 
       class="box" :style="{ backgroundColor: item.color }">
    {{ item.name }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      styledItems: [
        { id: 1, name: 'Red Box', color: 'red' },
        { id: 2, name: 'Green Box', color: 'green' },
        { id: 3, name: 'Blue Box', color: 'blue' }
      ]
    }
  }
}
</script>

以上方法展示了Vue中实现循环盒子的各种场景，可以根据实际需求选择合适的方式。