vue实现循环盒子

使用 v-for 指令循环渲染盒子

在 Vue 中，可以使用 v-for 指令来循环渲染一组元素。假设需要循环渲染多个盒子，可以按照以下方式实现：

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

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

<style>
.box-container {
  display: flex;
  gap: 10px;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
}
</style>

动态生成盒子数量

如果需要根据某个条件动态生成盒子数量，可以在 data 中定义盒子数量，并通过计算属性或方法生成盒子数组：

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

<script>
export default {
  data() {
    return {
      boxCount: 5
    }
  },
  computed: {
    generateBoxes() {
      return Array.from({ length: this.boxCount }, (_, i) => ({
        content: `Box ${i + 1}`
      }))
    }
  }
}
</script>

响应式更新盒子内容

如果盒子内容需要根据用户输入或其他动态数据更新，可以使用响应式数据绑定：

<template>
  <div>
    <input v-model="newBoxContent" placeholder="Enter box content" />
    <button @click="addBox">Add Box</button>
    <div class="box-container">
      <div v-for="(box, index) in boxes" :key="index" class="box">
        {{ box.content }}
        <button @click="removeBox(index)">×</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      boxes: [
        { content: 'Box 1' },
        { content: 'Box 2' },
      ],
      newBoxContent: ''
    }
  },
  methods: {
    addBox() {
      if (this.newBoxContent.trim()) {
        this.boxes.push({ content: this.newBoxContent })
        this.newBoxContent = ''
      }
    },
    removeBox(index) {
      this.boxes.splice(index, 1)
    }
  }
}
</script>

<style>
.box {
  position: relative;
}

.box button {
  position: absolute;
  top: 0;
  right: 0;
  background: red;
  color: white;
  border: none;
  cursor: pointer;
}
</style>

使用组件封装盒子

对于更复杂的场景，可以将盒子封装为单独的组件：

<template>
  <div class="box-container">
    <BoxItem
      v-for="(box, index) in boxes"
      :key="index"
      :content="box.content"
      @remove="removeBox(index)"
    />
  </div>
</template>

<script>
import BoxItem from './BoxItem.vue'

export default {
  components: { BoxItem },
  data() {
    return {
      boxes: [
        { content: 'Box 1' },
        { content: 'Box 2' },
      ]
    }
  },
  methods: {
    removeBox(index) {
      this.boxes.splice(index, 1)
    }
  }
}
</script>

创建 BoxItem.vue 组件文件：

<template>
  <div class="box">
    {{ content }}
    <button @click="$emit('remove')">×</button>
  </div>
</template>

<script>
export default {
  props: ['content']
}
</script>

使用过渡效果

为盒子添加进入和离开的过渡效果：

<template>
  <div>
    <button @click="addBox">Add Box</button>
    <div class="box-container">
      <transition-group name="box" tag="div">
        <div
          v-for="(box, index) in boxes"
          :key="index"
          class="box"
          @click="removeBox(index)"
        >
          {{ box.content }}
        </div>
      </transition-group>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      boxes: []
    }
  },
  methods: {
    addBox() {
      this.boxes.push({ content: `Box ${this.boxes.length + 1}` })
    },
    removeBox(index) {
      this.boxes.splice(index, 1)
    }
  }
}
</script>

<style>
.box-enter-active, .box-leave-active {
  transition: all 0.5s;
}
.box-enter, .box-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>

以上方法提供了从基础到进阶的 Vue 循环盒子实现方式，可以根据具体需求选择适合的方案。