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>