基于Vue.js根据数组条目数量动态创建方形盒子

这事儿实现起来挺简单的，核心就是用Vue的v-for指令循环渲染数组项，再配合CSS把元素改成方形样式就行。我给你写个完整的可运行示例，连控制台怎么传数组的方法也一起说明白：

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
  <title>Vue Dynamic Boxes</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <style>
    .box-container {
      display: flex;
      gap: 1rem;
      margin: 2rem;
      flex-wrap: wrap;
    }
    .square-box {
      width: 100px;
      height: 100px;
      border: 1px solid #333;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      background-color: #f5f5f5;
      transition: background-color 0.2s;
    }
    .square-box:hover {
      background-color: #e0e0e0;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="box-container">
      <!-- 循环渲染每个盒子，绑定唯一key确保DOM更新效率 -->
      <div 
        v-for="(item, index) in boxItems" 
        :key="index" 
        class="square-box"
      >
        {{ item }}
      </div>
    </div>
  </div>

  <script>
    // 把Vue实例挂载到全局变量vm，方便控制台直接操作
    const vm = new Vue({
      el: '#app',
      data() {
        return {
          // 初始空数组，后续从控制台更新
          boxItems: []
        }
      }
    })
  </script>
</body>
</html>

怎么从控制台传入数组？ #

打开浏览器开发者工具（按F12）切换到Console标签，直接输入下面的代码回车：

vm.boxItems = ['101','102','103']

你会立刻看到页面上生成三个方形盒子，分别显示101、102、103。后续如果要修改数组（比如新增条目vm.boxItems.push('104')，或者替换成新数组），Vue会自动同步更新DOM。

关键细节说明 #

• v-for="(item, index) in boxItems"：遍历boxItems数组，item是当前元素值，index是它的索引
• :key="index"：给每个循环项绑定唯一标识，帮助Vue高效更新DOM（如果数组元素有自身唯一ID，用ID替代index会更稳妥）
• 全局vm变量：我们把Vue实例赋值给了全局变量，这样在控制台就能直接访问和修改它的数据了

内容的提问来源于stack exchange，提问作者Prasanna Srinivasan