vue增删改查（示例）

已于 2024-04-08 09:53:52 修改
阅读量1.2k 收藏 2
点赞数
分类专栏： vue 文章标签： 1024程序员节
于 2022-10-24 19:31:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_72189003/article/details/127499289
版权

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
    <div id="box">
       
        <div class="head1">
            <p><span>用户权限/</span>用户列表</p>
        </div>
        <div class="bottom">
            <p><span><button id="tianjia" @click="tianjia">添加</button></span>
                <span>角色 <input type="text" id="ipt"placeholder="全部" v-model="ipt"></span>
                <span><button id="sousuo"@click="sousuo()">搜索</button></span>
                <span>
                            <input id="ipt1" type="text" placeholder="修改后称昵" v-model="xgcn">
                            <input id="ipt1" type="text" placeholder="修改后用户" v-model="xgyh">
                            <input id="ipt1" type="text" placeholder="修改后角色" v-model="xgjs">
                            <button id="xgbc" @click="qrbc()">点击修改保存</button>
                 </span>
            </p>
            <table id="tab" border="1">
                <tr id="tr1">
                    <th>序号</th>
                    <th>称昵</th>
                    <th>用户名</th>
                    <th>角色</th>
                    <th>创建时间</th>
                    <th>最近修改时间</th>
                    <th>管理</th>
                </tr>
                <tbody id="tbd">
                    <tr v-for="(item,index) in str1==0?arr:arr3">
                        <td>{{item.id}}</td>
                        <td>{{item.chengni}}</td>
                        <td>{{item.yonghuming}}</td>
                        <td>{{item.jiaose}}</td>
                        <td>9.27</td>
                        <td>9.27</td>
                        <td><button class="xiugai" @click="xiugai(index)">修改</button>
                            <button class="shanchu" @click="del(index)">删除</button></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="bottom1" v-show="show1">
            <input type="text" placeholder="称昵" v-model="chengni"><br>
            <input type="text" placeholder="用户名" v-model="yonghuming"><br>
            <input type="text" placeholder="角色" v-model="jiaose"><br>
            <button id="queren" @click="queren">确认添加</button><button id="quxiao" @click="quxiao">取消</button>
        </div>
    </div>
</body>

</html>

style：

<style>
    * {
        margin: 0;
        padding: 0;
    }

    ul li {
        list-style: none;
    }

    body {
        background: #e7e6e6;
    }

    .head1 {
        margin-left: 20px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .head1 p span {
        color: #767676;
    } 

    .bottom {
        width: 92rem;
        height: 700px;
        background: #fff;
        margin-top: 20px;
        margin: auto;
        position: relative;
    }

    .bottom p {
        padding-top: 20px;
    }

    .bottom p span {
        margin-left: 25px;
    }

    .bottom p span button {
        width: 70px;
        height: 35px;
        background: #0076fb;
        color: #fff;
        border-radius: 10px;
        border: none;
    }

    #ipt {
        width: 400px;
        height: 32px;
        border: 1px solid #ccc;
        outline: none;
        border-radius: 5px;
    }
    #ipt1{
        width: 100px;
        height: 32px;
        border: 1px solid #ccc;
        outline: none;
        border-radius: 5px;
        margin-left: 5px;
        margin-right: 5px;
    }
    #tab {
        width: 1400px;
        height: 30px;
        margin-left: 25px;
        margin-top: 10px;
        border-collapse: collapse;
    }

    .bottom1 {
        width: 400px;
        height: 300px;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        position: absolute;
        top: 190px;
        left: 500px;
        /* display: none; */
    }

    .bottom1 input {
        width: 200px;
        height: 40px;
        border: none;
        margin-left: 100px;
        margin-top: 15px;
        border-radius: 10px;
    }

    .bottom1 button {
        width: 80px;
        height: 40px;
        border: none;
        margin-left: 80px;
        margin-top: 40px;
        border-radius: 10px;
    }

    #queren {
        background: #0076fb;
        color: #fff;
    }

    #quxiao {
        background: #767676;
        color: #fff;
    }

    #tbd tr td {
        height: 50px;
        text-align: center;
    }

    .xiugai {
        width: 80px;
        height: 40px;
        border: none;
        color: #fff;
        background: green;
        border-radius: 20px;
    }

    .shanchu {
        width: 80px;
        height: 40px;
        border: none;
        color: #fff;
        background: rgb(158, 8, 8);
        border-radius: 20px;
        margin-left: 10px;
    }
    #xgbc{
        width: 100px;
    }
    table tr:nth-child(odd){
        background: rgb(242, 144, 144);
    }
    table tr:nth-child(even){
        background: rgb(149, 149, 237);
    }
    table tr:hover{
        background: rgb(228, 228, 153);
    }
    #tr1{
        background: #fff;
    }
</style>

script：

<script>
        new Vue({
            el: '#box',
            data() {
                return {
                    show1: false,
                    chengni: '',
                    yonghuming: '',
                    jiaose: '',
                    ipt: '',
                    str1:0,
                    arr3:'',
                    xgcn:'',
                    xgyh:'',
                    xgjs:'',
                    index:'',   //点击修改后，把修改的下标传进来，（这里的index是它的空值）
                    arr: [{
                            id: 1,
                            chengni: 'zhangsa',
                            yonghuming: 12,
                            jiaose: 123
                        },
                        {
                            id: 1,
                            chengni: 'zhangsa',
                            yonghuming: 12,
                            jiaose: 123
                        },
                        {
                            id: 1,
                            chengni: 'zhangsa',
                            yonghuming: 12,
                            jiaose: 123
                        }
                    ]
                }
            },
            methods: {
        // 点击添加显示
                tianjia() {
                    this.show1 = true
                },
        // 点击取消隐藏
                quxiao() {
                    this.show1 = false
                },
        // 确认添加
                queren() {
                    let obj = {
                        id: 1,
                        chengni: this.chengni,
                        yonghuming: this.yonghuming,
                        jiaose: this.jiaose,

                    }
                    this.arr.push(obj)
                },
        // 删除
                del(a) {
                    if (confirm('确定要删除吗')==true){
                        this.arr.splice(a, 1) 
                    }else{
                        return false;
                    }
                    
                },
        // 修改
                xiugai(index){
                    this.index = index
                    this.xgcn= this.arr[index].chengni
                    this.xgyh= this.arr[index].yonghuming
                    this.xgjs= this.arr[index].jiaose
                },

        // 点击确认保存
        qrbc(){
            this.arr[this.index].chengni=this.xgcn
            this.arr[this.index].yonghuming=this.xgyh
            this.arr[this.index].jiaose=this.xgjs
            
        },             
        // 查询
                sousuo() {
                    if (this.ipt == '') {
                this.str1 = 0
                return
            }
            this.str1 = 2
            this.arr3 = this.arr.filter((res) => {
                return res.chengni.includes(this.ipt)
            })
            console.log(this.ipt);
        }

            },
        })
    </script>

rua ~ 咪
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue之实现列表的渲染，增加，删除和查询
low666的博客
03-05 8368
vue之实现列表的渲染，增加，删除和查询 1.列表的渲染 首先创建 Vue 实例，得到 ViewModel，然后在列表中渲染数据 <tbody> <tr v-for="item in list" :key="item.id"> <td>{{ item.id }}</td> <td v-t...
Vue实现的增删改查
12-03
Vue的增删改查，没什么好说的，参考参考就行了，重在理解，包含了部分模糊查，需要的就看看吧，大佬勿喷，小白出道
vue简单实现增删改查
最新发布
weixin_62154336的博客
05-19 236
【代码】vue简单实现增删改查。
用vue实现增删改查
m0_64344470的博客
05-08 2819
1、some(回调函数（item，index）) ⽅法测试数组中是不是⾄少有1个元素通过了被提供的函数测 试。3、 splice() ⽅法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被 修改的内容。此⽅法会改变原数组。2、find() ⽅法返回数组中满⾜提供的测试函数的第⼀个元素的值。6、indexOf()⽅法返回在数组中可以找到⼀个给定元素的第⼀个索引，如果不存在，则返回-1。5、 filter() ⽅法创建⼀个新数组, 其包含通过所提供函数实现的测试的所有元素。
用vue实现列表的增删改查基本功能（简单易懂）
热门推荐
why0925123的博客
10-10 1万+
用vue实现列表的增删改查基本功能（简单易懂）
基于Vue+ELement实现增删改查案例与表单验证（附源码）
万维网连五洲，二进制写尽天下事，喜欢结识新伙伴寻找志同道合的朋友，欢迎一起探讨学习
09-27 8974
增删改查是我们写项目百分之七十会遇到的代码，学会Vue+ELement这一套增删改查的流程让你的写代码的效率一步登天！！！
vue项目的增删改查，表单验证
qq_62797382的博客
07-28 901
最终的 BookList.vue。
VUE+Element实现增删改查的示例
01-22
&最近因为一些原因，没有更博客，昨天老师布置了一个作业，用vue实现增删改查功能，想想这也不难，就做一下试试吧。 因为自己写的样式没有别人做的好，因此我想用现成的UI框架，一直也没用过Element，就干脆趁机学...
增删改查vue前端代码示例
03-24
在"增删改查vue前端代码示例"中，我们可以看到一系列与Vue.js相关的文件，这些文件主要展示了如何在前端实现基本的数据管理功能，即创建（Create）、读取（Read）、更新（Update）和删除（Delete），这是任何数据...
webpack4+express+mongodb+vue实现增删改查的示例
10-17
主要介绍了webpack4+express+mongodb+vue 实现增删改查的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
node+vue前后端分离增删改查
08-17
在现代Web开发中，前后端分离的架构设计已经成为主流，其中“Node+Vue前后端分离增删改查”是一个典型的示例。这个项目利用Node.js（搭配Express框架）作为后端服务器，处理数据请求和业务逻辑，而Vue.js（配合...
Vue实现表格增删改查
05-05
在本文中，我们将深入探讨如何使用Vue2和Bootstrap框架实现表格的增删改查功能。Vue.js是一个轻量级的JavaScript框架，它以其简洁的API和强大的响应式数据绑定而闻名，非常适合构建用户界面。而Bootstrap则是一个...
Vue实现增删改查功能
weixin_61443360的博客
06-26 880
它调用`reset`方法来重置表单数据，然后调用名为`getCity`的API接口来获取指定城市的详细信息。- `getList`：此方法用于查询城市列表数据。它调用`resetForm`方法来重置查询表单，然后调用`handleQuery`方法来查询城市列表数据。- `handleQuery`：此方法用于搜索城市列表数据。它将页码重置为1，然后调用`getList`方法来查询城市列表数据。- `cancel`：此方法用于关闭添加或修改城市对话框，并重置表单数据。
VUE通用后台管理系统（三）页面增删查改
qq_45600228的博客
07-22 1972
VUE通用后台管理系统（三）页面增删查改
【springboot+vue项目（十）】springboot的增删改查
shanglin1122的博客
08-10 1127
基于Spring Boot框架的上传日志表控制器，一些常见的CRUD（创建、读取、更新、删除）操作接口，UploadFileService继承自IService接口的一个服务接口。该控制器依赖于服务对象，通过Autowired注解进行注入。
从零开始的VUE项目-03（数据的增删改查）
木卯彳亍的博客
04-18 4893
这一篇中，我们要实现的基本就是这么个东西 这个页面就是我们创建的DataManagement.vue页面，我们的主要代码将写在这里面，这个表格我们将用Element-UI的table组件来实现 组件地址：https://element.eleme.cn/#/zh-CN/component/table 我们先用这个基础表格看看效果，点击表格下面的显示代码，我们把这些代码复制粘贴到我们的DataManagement.vue里，运行看看效果 这时有人可能会问，我地图没有啊，来，让我们运行ng
Vue对数据的增删改
weixin_47174945的博客
09-26 636
Vue对数据的增删改 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table
vue实现增、删、改、查、批量删除的例子
沈宫新的专栏
05-20 1043
一个使用vue实现增，删，改，查，批量删除的入门实例。
vue增删改查函数调用
05-30
好的，我可以帮你解答这个问题。 在 Vue 中实现增删改查操作，通常需要在组件中定义对应的方法，然后在模板中调用这些方法。下面是一个简单的示例，演示了如何在 Vue 中实现增删改查操作： ```html <template> <div> <h2>用户列表</h2> <ul> <li v-for="(user, index) in users" :key="user.id"> {{ user.name }} <button @click="editUser(index)">编辑</button> <button @click="deleteUser(index)">删除</button> </li> </ul> <h2>添加用户</h2> <form @submit.prevent="addUser"> <label> 姓名： <input type="text" v-model="newUser.name"> </label> <label> 年龄： <input type="text" v-model="newUser.age"> </label> <button type="submit">添加</button> </form> </div> </template> <script> export default { data() { return { users: [ { id: 1, name: '张三', age: 20 }, { id: 2, name: '李四', age: 22 }, { id: 3, name: '王五', age: 25 }, ], newUser: { name: '', age: '', }, editingIndex: -1, } }, methods: { addUser() { if (this.newUser.name && this.newUser.age) { const id = this.users.length + 1 this.users.push({ id, ...this.newUser }) this.newUser = { name: '', age: '' } } else { alert('请输入完整信息') } }, editUser(index) { this.newUser = { ...this.users[index] } this.editingIndex = index }, saveUser() { if (this.newUser.name && this.newUser.age) { this.users.splice(this.editingIndex, 1, this.newUser) this.newUser = { name: '', age: '' } this.editingIndex = -1 } else { alert('请输入完整信息') } }, cancelEdit() { this.newUser = { name: '', age: '' } this.editingIndex = -1 }, deleteUser(index) { this.users.splice(index, 1) }, }, } </script> ``` 在上面的代码中，我们定义了一个包含增删改查操作的用户列表组件。其中，`users` 数组存储了所有用户信息，`newUser` 对象用于添加或编辑用户时输入的信息，`editingIndex` 变量用于记录当前正在编辑的用户的索引。 在模板中，我们使用 `v-for` 指令循环渲染用户列表，并为每个用户渲染一个编辑和删除按钮。当用户点击编辑按钮时，我们会调用 `editUser` 方法，将当前用户的信息赋值给 `newUser` 对象，并将 `editingIndex` 设置为当前用户的索引。当用户点击删除按钮时，我们会调用 `deleteUser` 方法，从 `users` 数组中删除对应的用户。 在添加用户部分，我们使用 `v-model` 指令将输入框的值绑定到 `newUser` 对象上，并在表单提交时调用 `addUser` 方法，将 `newUser` 对象添加到 `users` 数组中。 在编辑用户部分，我们在 `newUser` 对象中存储当前正在编辑的用户的信息，并将 `editingIndex` 设置为当前用户的索引。当用户点击保存按钮时，我们会调用 `saveUser` 方法，将 `newUser` 对象更新到 `users` 数组中，并清空 `newUser` 对象和 `editingIndex` 变量。当用户点击取消按钮时，我们会调用 `cancelEdit` 方法，将 `newUser` 对象清空，并将 `editingIndex` 变量重置为 -1。 这就是一个简单的 Vue 增删改查示例，希望对你有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值