vue实现动态添加元素(可删除)

  //车辆添加按钮
    handleAddCar(){
      console.log(this.infoForm.carList);
      if(this.infoForm.carList.length>1){
         Toast.success({ message:"最多添加两辆车辆信息" ,duration: 1000});
         return;
      }else{
         let cope = {
          name: "",
         }
         this.infoForm.carList.push(cope);
      }
      
    },
 //删除车辆
   handleDelCar(index){
       this.infoForm.carList.splice(index, 1);
   },

 <van-field 
         placeholder="车辆信息"
         :disabled="isPreview"
         v-for="(list,index) in infoForm.carList"
         :key="index"
         :label="'车辆信息'+(index+2)"
         :name="'licenseNum'+(index+2)"
         v-model="list.name"
      >
         <template #button>
            <van-icon name="close" v-show="!isPreview"  size="0.7rem" color="#1989fa" @click="handleDelCar"/>
         </template>
       </van-field> 

<template>
  <div>
    <input
      v-model="inpValue"
      type="text"
      placeholder="请输入添加文字"
      @blur="addList"
    />
    <ul v-if="list.length > 0">
      <li v-for="(item, index) in list" :key="index">
        {{ item }} <span @click="removeList(index)">X</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      inpValue: "",
    };
  },
  methods: {
    // 向list数组内添加
    addList() {
      // 判断输入框不为空
      if (this.inpValue) {
        // 查重
        const isIncludes = this.list.includes(this.inpValue);
        if (!isIncludes) {
          this.list.push(this.inpValue);
          this.inpValue = "";
        } else {
          alert("添加重复");
          this.inpValue = "";
        }
      }
    },
    // 向数组中删除元素
    removeList(index) {
      this.list.splice(index, 1);
    },
  },
};
</script>

<style scoped>
div {
  width: 1200px;
  margin: 100px auto;
}
input {
  width: 400px;
  border: 1px solid #eee;
  border-radius: 5px;
  height: 30px;
  line-height: 30px;
}
ul {
  margin: 20px 0;
  padding: 0;
  list-style-type: none;
  width: 400px;
}
li {
  border: 1px solid #ccc;
  margin: 10px 0;
  position: relative;
}
span {
  position: absolute;
  cursor: pointer;
  right: 10px;
  color: red;
}
</style>