vue实现li列表的新增删除和修改

哈喽，我又来更新啦，依旧还是业务场景的实现

通过新增、删除、修改按钮实现li列表的改变

新增：点击新增按钮，进行新增

编辑：点击列表某一项，然后点击编辑按钮进行修改

删除：点击列表某一项，然后点击删除按钮进行删除

代码如下

 <div class="con-icon">         <i class="el-icon-circle-plus-outline" @click="addClick"></i>         <i class="el-icon-edit-outline" @click="editClick"></i>         <i class="el-icon-delete" @click="delClick"></i>
</div>
<div class="con-list">         <ul class="con-list">            <li class="list-li" v-for="(todo,i) in todos" :key="i" @click="selected(i)">{{todo}}</li>          </ul>
</div>

通过for循环遍历todos的内容来渲染li列表

data内容：

listID: '',
input_todo: '',
new_todo: '',
todos: ['猫眼三姐妹', '城市猎人', '头文字D'],
centerDialogAdd: false,
centerDialogEdit: false,
centerDialogDel: false,

新增

addClick () {      this.centerDialogAdd = true    },
add () {      this.todos.push(this.input_todo)      this.input_todo = ''      this.centerDialogAdd = false
},

新增弹窗：

<el-dialog title="新增" :visible.sync="centerDialogAdd" width="30%">      <el-input v-model="input_todo" placeholder="请输入内容"></el-input>      <span slot="footer" class="dialog-footer">        <el-button @click="centerDialogAdd = false">取 消</el-button>        <el-button type="primary" @click="add">确 定</el-button>      </span>
</el-dialog>

通过this.centerDialogAdd的状态来控制dialog的打开关闭

通过push方法把新增的li内容添加到this.input_todo进行存储

之后把this.input_todo进行置空，为下次执行添加进行准备

编辑：

 editClick () {      this.centerDialogEdit = true      const i = this.listID      this.new_todo = this.todos[parseInt(i)]
},
edit () {      const i = this.listID      this.todos[parseInt(i)] = this.new_todo      this.new_todo = ''      this.centerDialogEdit = false
},

编辑弹窗：

<el-dialog title="编辑" :visible.sync="centerDialogEdit" width="30%">      <el-input v-model="new_todo" placeholder="请输入内容"></el-input>      <span slot="footer" class="dialog-footer">        <el-button @click="centerDialogEdit = false">取 消</el-button>        <el-button type="primary" @click="edit">确 定</el-button>      </span>
</el-dialog>

基本操作上面的新增逻辑一样

selected (i) {      this.listID = i
},

通过seleted（）获取到当前列的key值通过
this.new_todo = this.todos[parseInt(i)]
把列表原来的值进行回显再次通过
this.todos[parseInt(i)] = this.new_todo
对选中的列表内容进行修改
在这里插入图片描述

删除：

代码如下：

delClick () {      this.centerDialogDel = true
},
del () {      const i = this.listID      this.todos.splice(i, 1)      this.centerDialogDel = false
},

删除弹窗：

<el-dialog title="删除" :visible.sync="centerDialogDel" width="30%">      <span>确认删除该分类吗？</span>      <span slot="footer" class="dialog-footer">        <el-button @click="centerDialogDel = false">取 消</el-button>        <el-button type="primary" @click="del">确 定</el-button>      </span>
</el-dialog>

通过点击列表获取当前列的key值执行 **this.todos.splice(i, 1)**对选中列的数据进行删除

以上就是一个业务场景的实现，希望可以帮助到大家！！！

vue实现li列表的新增删除和修改相关推荐

基于ruoyi+vue+elementUI实现列表，新增，附件上传，tab+springBoot+mybatis+oracle序列+批量新增
基于ruoyi+vue+elementUI实现列表,新增,附件上传,tab+springBoot+mybatis+oracle序列+批量新增页面效果列表页面新增页面详情页面代码实现列表+新 ...
Vue ul li 列表最后一个子元素 “不需要列表横线写法”
Vue里面 ul li 列表最后一个子元素 "不需要列表横线写法" .blockflex 1text-align centerborder-right 1px solid rgb ...
Python学习-----起步4（列表元素的添加，删除，修改，查询，获取长度）
目录前言: 列表元素的添加(或者叫写入) 1.append()函数 2.extend()函数 3.insert()函数列表元素的删除 1.remove() 函数 2. pop() 函数 3.cle ...
Javaweb15==mysql+mybatis+servlet+axios+fasetjson+vue+elementUI前后端分离，实现列表后端分页、模糊查询后分页、新增、单一/批量删除、修改
难点:模糊查询后再次分页,并可以选择页数. 最终环境配置: maven3.8:依赖包管理 IDEA2021+JDK8+mysql connector java5+Mysql5+mybatis3.5:从 ...
Vue之通过连接数据库的接口获取列表实现添加删除功能
把最近学习vue的一些知识点记录下来,今天记录一下Vue通过vue-resource连接数据库接口渲染列表和添加删除功能首先我们得引入vue的版本文件和vue-resource.js,注意:vue- ...
java css隔行变色_JS+CSS实现Li列表隔行换色效果的方法
本文实例讲述了JS+CSS实现Li列表隔行换色效果的方法.分享给大家供大家参考.具体实现方法如下: CSS+Js实现Li列表隔行换色效果 .mytable {border-collapse:colla ...
html仿微信滑动删除,使用Vue实现移动端左滑删除效果附源码
左滑删除在移动端是很常见的一种操作,常见于删除购物车中的商品,删除收藏夹中文章等等场景.我们只需要手指按住要删除的对象,然后轻轻向左滑动,便会出现删除按钮,然后点击删除按钮即可删除对象. 点击下载源码 ...
vue实现商城列表渲染
需求: 利用vue实现商城列表渲染所需数据如下: mockData: [{"id": 1,"img": "https://img13 ...
Vue 数组删除和修改元素后页面立即刷新
需求:页面立即刷新 vue 页面点击删除和修改后,数据不能够立马刷新,原因很简单:点击页面操作,分别调用删除和修改的后台方法成功后数据库数据是成功了,但是前端页面并没有拿到删除数据后的新数组和修改数据 ...
vue 在v-for列表动态添加ref，并获取对应元素
vue 在v-for列表动态添加ref,并获取对应元素 vue中的ref对于操作dom非常方便,可以直接通过给div加ref,在方法里通过this.$refs.ref的name获取 <templ ...

vue实现li列表的新增删除和修改

vue实现li列表的新增删除和修改相关推荐

最新文章

热门文章