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>