上面代码在vue2里面怎么写

在Vue2中，你可以使用Vue的指令（directive）和方法（method）来实现增加和删除盒子的功能。

首先，在Vue的模板中添加按钮和盒子容器：

<template>
  <div>
    <button @click="addBox">增加盒子</button>
    <div class="box-container">
      <div class="box" v-for="(box, index) in boxes" :key="index">
        <button @click="deleteBox(index)">删除</button>
      </div>
    </div>
  </div>
</template>

然后，在Vue的脚本中定义数据和方法：

<script>
export default {
  data() {
    return {
      boxes: [] // 存储盒子的数组
    }
  },
  methods: {
    addBox() {
      this.boxes.push({}); // 添加一个空对象到数组中
    },
    deleteBox(index) {
      this.boxes.splice(index, 1); // 删除指定下标的对象
    }
  }
}
</script>

最后，在Vue的样式中添加盒子的样式：

<style>
.box {
  width: 50px;
  height: 50px;
  background-color: red;
  margin: 10px;
}
</style>

现在，你就可以在Vue应用中使用addBox和deleteBox方法来增加和删除盒子了。