vue 实现添加和删除需求

关注

原创最新推荐文章于 2026-08-11 11:24:21 发布 1.5k 阅读 AI 写同款· GEO 优化 ›

Vue动态添加或删除DOM元素：购物车实例在 Vue 中实现动态添加或删除 DOM 元素，主要通过响应式数据绑定结合列表渲染和条件渲染实现。可以使用动态列表渲染（v-for指令），通过维护响应式数组控制 DOM 元素的增删。使用 v-for 和数组来控制元素的动态渲染，通过维护一个数组，然后利用 v-for 循环来生成 DOM 元素。当添加或删除时，只需要修改数组的长度或者元素，Vue 的响应式系统会自动更新 DOM。这是 Vue 推荐的做法，因为它充分利用了数据驱动的特性，避免直接操作 DOM。阅读详情

文章目录

- vue 简易实现添加和删除需求

vue 简易实现添加和删除需求

要求

文本框和添加按钮，点击添加按钮后，添加文本，并在下方显示，同时每个文本佩带一个删除按钮，方便其进行删除

效果图

初始图：
在这里插入图片描述
添加 11111 元素：

选择删除 414141：

点击确定后：
在这里插入图片描述

思路

主要操作分为获取文本，添加及删除操作
获取文本：可以通过文本框的 id 进行获取
添加：点击添加按钮，然后获取到文本的 value 值，然后添加到 data 数组中即dataArr；添加完后将文本框内的 value值清空
删除：点击删除按钮，然后根据文本的index 删除对应的元素

代码

<template>
  <div class="hello">
    <!--  实现需求 将添加的元素都在下方显示，并配有 删除 按钮，可以进行删除操作 -->
    <div>
      <input type="text" name="" id="data">
      <button @click="addDataArr">add</button>
      <p v-for="(item,index) in dataArr"  v-bind:key="item">
        {{item}}
        <button @click="deleteDataArr(index)" type='text'>delete</button>
      </p>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
export default {
  name: 'HelloWorld',
  data () {
    return {
      // 存放输入的数据
      dataArr:[], 
    }
  },
  methods:{
    // 添加 data 数据
    addDataArr(){
      // 先获取 文本框的 value 值，然后添加到 data 数组中 dataArr
      // 添加完后， 将 文本框中的 value 值 清空
      let dataId = document.getElementById('data')
      let dataValue = dataId.value
      console.log('new data:',dataValue)
      this.dataArr.push(dataValue)
      dataId.value = ''
    },
    // 根据 index 删除 data数据
    deleteDataArr(index){
      // 先获取到当前点击元素的index，然后将dataArr中对应index的元素删除
      // 删除时出现弹窗 确认时候要删除
      console.log('before',this.dataArr)
      let truthBeDelete = window.confirm("您确认是否要删除" + this.dataArr[index] +'吗?')
      if(truthBeDelete){
        this.dataArr.splice(index,1)
      }else{
        this.dataArr = this.dataArr
      }
      console.log('after',this.dataArr)
    }
  }
}
</script>

<style scoped>
</style>