快捷導(dǎo)航

vue實(shí)現(xiàn)動(dòng)態(tài)添加元素(可刪除)

更新時(shí)間：2024年12月26日 09:27:07 作者：a伊雪

文章介紹了如何在Vue中動(dòng)態(tài)添加和刪除元素,通過(guò)使用Vue的響應(yīng)式數(shù)據(jù)和v-for指令,可以輕松地實(shí)現(xiàn)這一功能,文章還詳細(xì)講解了如何處理元素的添加和刪除事件,以及如何更新視圖以反映這些變化

vue動(dòng)態(tài)添加元素(可刪除)

  //車(chē)輛添加按鈕
    handleAddCar(){
      console.log(this.infoForm.carList);
      if(this.infoForm.carList.length>1){
         Toast.success({ message:"最多添加兩輛車(chē)輛信息" ,duration: 1000});
         return;
      }else{
         let cope = {
          name: "",
         }
         this.infoForm.carList.push(cope);
      }
      
    },
 //刪除車(chē)輛
   handleDelCar(index){
       this.infoForm.carList.splice(index, 1);
   },

 <van-field 
         placeholder="車(chē)輛信息"
         :disabled="isPreview"
         v-for="(list,index) in infoForm.carList"
         :key="index"
         :label="'車(chē)輛信息'+(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>

vue動(dòng)態(tài)添加/刪除dom元素

vue的思想是通過(guò)數(shù)據(jù)操作dom，所以我們根據(jù)data中的數(shù)據(jù)進(jìn)行對(duì)dom的遍歷，從而操作數(shù)據(jù)就可以對(duì)vue進(jìn)行一個(gè)動(dòng)態(tài)的添加或者刪除啦！

<template>
  <div>
    <input
      v-model="inpValue"
      type="text"
      placeholder="請(qǐng)輸入添加文字"
      @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數(shù)組內(nèi)添加
    addList() {
      // 判斷輸入框不為空
      if (this.inpValue) {
        // 查重
        const isIncludes = this.list.includes(this.inpValue);
        if (!isIncludes) {
          this.list.push(this.inpValue);
          this.inpValue = "";
        } else {
          alert("添加重復(fù)");
          this.inpValue = "";
        }
      }
    },
    // 向數(shù)組中刪除元素
    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>