vue实现顺序表第i位删除可视化完整代码

下面是vue实现顺序表第i位删除可视化的完整代码：

<template>
  <div>
    <div class="input-wrap">
      <label for="index">要删除的位置：</label>
      <input type="number" id="index" v-model="index" />
      <button @click="deleteItem">删除</button>
    </div>
    <div class="list-wrap">
      <div class="list-item" v-for="(item, index) in list" :key="index">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [1, 2, 3, 4, 5],
      index: ''
    };
  },
  methods: {
    deleteItem() {
      const index = this.index - 1;
      if (index >= 0 && index < this.list.length) {
        this.list.splice(index, 1);
      }
    }
  }
};
</script>

<style scoped>
.input-wrap {
  margin-bottom: 10px;
}

.list-wrap {
  display: flex;
  flex-wrap: wrap;
}

.list-item {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #f0f0f0;
  margin-right: 10px;
  margin-bottom: 10px;
}
</style>

在这个代码中，我们首先定义了一个包含了列表和索引的data对象。然后，我们在模板中渲染了一个输入框和一个按钮，用于接收用户输入的索引值，以及执行删除操作。接着，我们在模板中渲染了一个列表，用于展示当前的列表内容。最后，我们定义了一个deleteItem方法，用于删除指定位置的元素，并将删除后的列表展示在视图上。