vue动态增删dom元素，实现题目选项增、删、上移、下移

<template>
  <div class="container">
    <h1>单选题</h1>
    <el-form ref="form" :model="question" label-width="80px">
      <el-form-item label="题目">
        <el-input v-model="question.title"></el-input>
      </el-form-item>

      <el-form-item label="题干">
        <el-input type="textarea" v-model="question.content"></el-input>
      </el-form-item>

      <el-form-item
        label="选项"
        v-for="(item, index) in question.options"
        :key="index"
      >
        <el-input
          style="margin-bottom: 5px"
          type="textarea"
          v-model="question.options[index]"
        ></el-input>
        <el-button
          v-if="question.options.length < maxOptionNum"
          type="primary"
          icon="el-icon-plus"
          circle
          @click="add(index)"
        ></el-button>
        <el-button
          v-if="question.options.length > minOptionNum"
          type="danger"
          icon="el-icon-minus"
          circle
          @click="remove(index)"
        ></el-button>
        <el-button
          v-if="index != 0"
          type="success"
          icon="el-icon-top"
          circle
          @click="moveUp(index)"
        ></el-button>
        <el-button
          v-if="index != question.options.length - 1"
          type="warning"
          icon="el-icon-arrow-down"
          circle
          @click="moveDown(index)"
        ></el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "SingleQuestion",
  data() {
    return {
      question: {
        title: "单选题",
        content: "世界上最大的海洋是哪个？",
        options: ["1太平洋", "2大西洋", "3北冰洋", "4印度洋"],
      },
      maxOptionNum: 5,
      minOptionNum: 2,
    };
  },
  methods: {
    add(index) {
      let opts = this.question.options;
      opts.splice(index + 1, 0, " ");
      this.question.options = opts;
    },
    remove(index) {
      let opts = this.question.options;
      opts.splice(index, 1);
      this.question.options = opts;
    },
    moveUp(index) {
      let opts = this.question.options;
      opts.splice(index - 1, 0, opts.splice(index, 1)[0]);
    },
    moveDown(index) {
      let opts = this.question.options;
      opts.splice(index + 1, 0, opts.splice(index, 1)[0]);
    },
  },
};
</script>
<style>
.container {
  margin: 20px;
}
</style>