vue实现li新增修改删除

html

<div class="info oneBox">
							<p>前端html</p>
							<div v-for="item in jsyjList" class="oneBoxlist">
								<span v-if="item.id != isXg" :id="item.id">{{ item.name }}</span>
								<input type="text" placeholder="请输入" :id="item.id" v-model="item.name"
									v-if="item.id == isXg" @blur="overxg(item.id)" />
								<div class="oneBoxpic">
									<img src="../../assets/icon/bj2.png" title="编辑" @click="exit(item.id)" />
									<img src="../../assets/icon/del2.png" title="删除" @click="del(item.id)" />
								</div>
							</div>
							<div style="text-align:right;">
								<el-button size="mini" @click="addlist" style="padding:4px 10px;">
									<img src="../../assets/add.png" style="width:26px;" />
								</el-button>
							</div>
						</div>

js

//data
data:{
isXg: '',
jsyjList: [],
}
//新增
		addlist() {
			this.jsyjList.push({ name: '', id: uuidv4() },);
			let idLast = this.jsyjList[this.jsyjList.length - 1].id
			this.isXg = idLast;
			this.$nextTick(() => {
				var txtInput = document.getElementById(idLast);
				txtInput.focus();
			})

		},
		//编辑
		exit(id) {
			this.isXg = id;
			this.$nextTick(() => {
				var txtInput = document.getElementById(id);
				txtInput.focus();
			})
		},
		//删除
		del(id) {
			this.jsyjList.forEach(function (val, index, arr) {
				if (val.id == id) {
					arr.splice(index, 1);
				}
			})
		},
		// 如果输入为空，则取消新增
		overxg(id) {
			this.isXg = '';
			this.$nextTick(() => {
				var valInput = document.getElementById(id).innerText;
				if (valInput == '') {
					this.jsyjList.forEach(function (val, index, arr) {
						if (val.id == id) {
							arr.splice(index, 1);
						}
					})
				}
			})
		},

css

.oneBox p {
	width: calc(100% - 150px);
}

.oneBoxlist {
	display: flex;
	align-items: center;
}

.oneBoxlist:hover .oneBoxpic img {
	display: block;
}

.oneBoxlist span {
	line-height: 30px;
	font-size: 14px;
	color: #606266;
	text-indent: 2rem;
	display: inline-block;
	max-width: calc(100% - 100px);
}

.oneBoxpic {
	height: 30px;
	display: flex;
	align-items: center;
	width: 45px;
	margin-left: 10px;
}

.oneBoxlist .oneBoxpic img {
	width: 20px;
	height: 20px;
	display: none;
}

.oneBoxlist input {
	border: 0;
	width: calc(100% - 132px);
	padding: 4px 2px;
	height: 36px;
	margin-left: 32px;
}