Vue 页面动态添加标签

<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>