Vue 页面动态添加标签demo

<template>
  <div class="">
    <button @click="createNode">
      增加条件
    </button>
    <div v-for="(v, i) in addRankData" v-bind:key="i">
      {{ v }}
      <select
        class="add-style"
        v-model="v[0]"
      >
        <option
          v-for="option in addList"
          :key="option.value"
          :id="option.value"
          :name="option.name"
        >
        </option>
      </select>

      <div class="sort-style2">
        <input class="add-style" v-model="v[2]"></input>
        <button
          @click="del()"
          v-show="v === addRankData[addRankData.length - 1] ? true : false"
        >
          X
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
        addList: [
        { name: "参数0", value: 0 },
        { name: "参数1", value: 1 },
      ],
      addRankData: [],
    };
  },
  components: {},
  methods: {
    del() {
      this.addRankData.pop();   
    },
    createNode() {
      this.addRankData.push([]);
    },
  },
};
</script>

<style lang=''>
.add-style {
  width: 80px;
}
.sort-style2 {
  margin-top: -32px;
  margin-left: 192px;
}
</style>