vue2中类似于兵旗推演的点击盒子向四周对应网格位置移动效果的页面代码

以下是一个示例的Vue 2代码，实现了点击盒子后向四周对应网格位置移动的效果：

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

<script>
export default {
  data() {
    return {
      boxes: [
        { value: 1, active: false },
        { value: 2, active: false },
        { value: 3, active: false },
        { value: 4, active: false },
        { value: 5, active: false },
        { value: 6, active: false },
        { value: 7, active: false },
        { value: 8, active: false },
        { value: 9, active: false }
      ]
    };
  },
  methods: {
    moveBox(index) {
      this.boxes.forEach((box, i) => {
        if (i === index) {
          box.active = true;
        } else {
          box.active = false;
        }
      });
    }
  }
};
</script>

<style scoped>
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

.box.active {
  background-color: #ff0000;
}
</style>

在上面的代码中，我们使用了Vue的`v-for`指令来循环渲染盒子。每个盒子都有一个`active`属性，用于表示是否被点击选中。当点击某个盒子时，我们通过`moveBox`方法将对应盒子的`active`属性设置为`true`，同时将其他盒子的`active`属性设置为`false`，以实现移动效果。

CSS部分定义了盒子的样式，通过添加`.active`类来改变选中盒子的背景色。

请注意，这只是一个简单的示例代码，实现了点击盒子后的基本效果。如果你需要更复杂的移动逻辑或动画效果，可能需要进行进一步的开发和调整。