Vue结合layui综合练习增删改查

最新推荐文章于 2023-03-13 14:30:26 发布
最新推荐文章于 2023-03-13 14:30:26 发布
阅读量314 收藏
点赞数
分类专栏： Vue 文章标签： vue java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wengeaiyuanyuan/article/details/106662079
版权

综合练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
    <script src="lib/vue-2.4.0.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<style>
    form {
        margin: 0 auto;
    }
</style>


<body>
<div id="app">
    <div class="layui-inline" style="margin-top: 10px;">
        <div class="layui-input-inline" style="width: 100px;">
            <input type="text" placeholder="ID" class="layui-input" v-model="id">
        </div>
        <div class="layui-input-inline" style="width: 100px;">
            <input type="text" placeholder="姓名" class="layui-input" v-model="name">
        </div>
        <div class="layui-input-inline" style="width: 100px;">
            <input type="text" placeholder="性别" class="layui-input" v-model="sex">
        </div>
        <div class="layui-input-inline" style="width: 100px;">
            <input type="text" placeholder="年龄" class="layui-input" v-model="age">
        </div>

        <div class="layui-input-inline" style="width: 100px;">
            <button type="button" class="layui-btn" @click="add">添加</button>
        </div>
        <div class="layui-input-inline" style="width: 100px;">
            <button type="button" class="layui-btn layui-btn-normal" @click="reset">重置</button>

        </div>
    </div>


    <table class="layui-table">
        <colgroup>
            <col width="150">
            <col width="150">
            <col width="200">
            <col width="200">
            <col width="200">
        </colgroup>
        <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in users">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.sex}}</td>
            <td>{{item.age}}</td>
            <td>
                <button @click="deleteUser(item.id)" class="layui-btn">删除</button>
                <button @click="deleteUser(item.id)" class="layui-btn layui-btn-disabled">修改</button>
            </td>
        </tr>
        </tbody>
    </table>

</div>


</body>

<script src="layui/layui.js"></script>

<script>
    new Vue({
        el: "#app",
        data: {
            users: [
                {id: 1, name: "张三", sex: "男", age: 18},
                {id: 2, name: "李四", sex: "女", age: 23},
                {id: 3, name: "王五", sex: "男", age: 12},
                {id: 4, name: "赵六", sex: "女", age: 23},
                {id: 5, name: "曹琦", sex: "男", age: 25}
            ],
            id: "",
            name: "",
            sex: "",
            age: ""
        },
        methods: {
            add() {
                let user = {
                    id: this.id,
                    name: this.name,
                    sex: this.sex,
                    age: this.age
                }
                this.users.push(user);
            },

            reset() {
                this.id = "";
                this.name = "";
                this.sex="";
                this.age="";
            },

            deleteUser(id) {
                // let : 在es6的语法中用let来声明变量 . 相当于var
                // findIndex : 该方法主要应用于查找第一个符合条件的数组元素
                let index = this.users.findIndex(item => {
                    if (item.id == id) {
                        return true;
                    }
                })
                //splice() : 方法向/从数组中添加/删除项目，然后返回被删除的项目。
                this.users.splice(index, 1);
            },




        }

    })

</script>


</html>
_曹家三少
关注
专栏目录
layui简单的增删改查
qq_47795870的博客
11-17 452
简单的增删改查
推荐一款ant-design-vue 快速入门教程
西里古里的博客
05-08 3245
一款 PHP 语言基于 Laravel8、Vue、AntDesign等框架精心打造的一款模块化、插件化、高性能的前后端分离架构敏捷开发框架，可用于快速搭建前后端分离后台管理系统，本着简化开发、提升开发效率的初衷，目前框架已集成了完整的RBAC权限架构和常规基础模块，前端Vue端支持多主题切换，可以根据自己喜欢的风格选择想一个的主题，实现了个性化呈现的需求；
Vue 综合练习
qq_41123262的博客
07-24 221
需求： 根据数据生成一个列表，显示标题、类型、选项、分值 得到每个题型的数量及总分、分数占比 如 单选题 2题 6分 45% <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g
Vue综合练习
小源同学的博客
02-20 334
综合练习 需求 显示所有用户 删除用户 动态添加用户 关于样式【写的稍微好看点】我们使用layui <!-- 引入 layui.css --> <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css"> <!-- 引入 layui.js --> <script src="//unpkg.com/layui@2.6.8/dist/layui.js"> 第一
【vue】09-综合练习【html + css + js三剑客】
小楼一夜听春雨
03-13 195
vue初级练习
vue练习-综合应用
weixin_44756893的博客
05-27 109
音乐播放器 功能：歌曲搜索，歌曲播放，歌曲封面，歌曲评论，播放动画，mv播放 1.歌曲搜索：按下回车（v-on .enter）->查询数据(axios 接口 v-model)->渲染数据(v-for 数组 that) 注意，data中的数据要与元素绑定 2.歌曲播放：点击播放(v-on 自定义参数) -> 歌曲地址获取（接口） -> 歌曲地址设置（v-bind） 地址获取：请求地址： https://autumnfish.cn/song/url 请求方式：get 请求参数：id 响应
经验总结之一个月学习Web前端开发（html+css+js+vue3+element plus + echarts）
Comin的博客
12-30 2460
作为一名写了十多年代码， 在前端、后端之间不断反复横跳的码畜，虽然对于前端的MFC， QT, 各种游戏引擎（HGE, GB, Cocos2D等）的GUI等都有所涉猎，但是对于Web前端却一直没有触及，尽管对于H5很看好（想学），却也一直没有行动。直到最近，终于利用工作机会花了差不多一个月学习、实战了一把。这里说明一下，我之前对Web前端开发可以说是0基础。Html标签，css样式可能都只认识一两个，对VUE也只是知道有这么个框架而已。 大致情况是这样的，公司的游戏项目还处于前端Demo验证阶段，我后端
Java毕业设计-基于springboot+vueLayui和动漫商城管理的设计与实现-付源代码+论文+mysql（大作业）
最新发布
06-29
该系统不仅实现了动漫商品的增删改查等基本功能，还支持用户评论、订单管理等高级功能，为用户提供了一个全方位的购物体验。 在技术选型上，项目采用了Spring Boot框架，利用其快速开发、便捷部署的特性，为系统的...
Java 学习路线大全，再也不用迷路啦（持续更新）
腾讯全栈-ITCJF
10-14 2752
路线特点 最新，完整一条龙，从入门到入土（⭐ 表示推荐学习） 给出目标、学习建议、关键知识点、最优资源以及各类资源推荐（视频、书籍、文档、项目、工具等） 划分阶段、更有计划，且在最后给出持续学习的方向、探索 Java 程序员发展的无限可能 前言 首先呢，我们要了解 Java 的应用场景和就业方向，看看和自己的学习目的是否一致，目前，Java 的岗位需求多，是后台开发的主流编程语言，功能强大，还是很值得学习的。 阶段 1：Java 入门 目标 培养兴趣、快速上手 前期准备 准备好一款在线、随时随地
之之的前端面经整理
z_zhiya的博客
04-20 1441
之之的前端面经整理前言联通（2021-04-15）功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 前言 记录很不厉害的小赵的求职经验 联通（2021-04-15） 技术面照着简历问，问得浅没太深挖，不会的就答不会也没有压力面，时间
Vue实现Layui的集成方法步骤
10-15
主要介绍了Vue实现Layui的集成方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue知乎项目vue练习
06-06
适合初步学习vue的技术里面有代码包括路由ajax还有vuex
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
10-15
今天小编就为大家分享一篇layui table表格数据的新增,修改,删除,查询,双击获取行数据方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
10-16
今天小编就为大家分享一篇layui加载表格,绑定新增,编辑删除,查看按钮事件的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui使用vue的例子
06-13
layui使用vue的例子包含基本的页面增删改查,推荐给刚接触vue的小伙伴
vue--综合练习（品牌列表渲染）
冷月心的博客
05-15 455
vue--综合练习（品牌列表渲染）需求界面代码 需求 数据渲染 添加数据 删除数据 数据过滤 界面 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>品牌列表渲染</title> <script src="...
Vue简明实用教程(10)——Vue综合练习(购物车)
谷哥的小弟
11-16 572
关于Vue的综合练习小项目之购物车
练习—Vue计算器加比大小综合练习
m0_48788975的博客
11-08 912
软件：VScode 内容：1、比较数字大小 2、编写简易计算机 说明：这次的实验其实在学习Web基础的时候也可以练出来，可以看得出大部分代码都很熟悉（即使你Web基础学的不好），主要差距就在于如何综合到一起共同编成一个实例。讲道理我写这个实验的时候是把两块内容分开了，下面这个代码是借鉴讲课的同学的加以修改（写的真的很好我respect）。例子虽然看着简单其实还是有点坑的，下面跟大家讲一下这个练习 <!DOCTYPE html> <ht...
【vue】增删查改练习
清风微醺的博客
07-12 567
基于vue-cli、elementUI的Vue超简单入门小例子 vue+elementui搭建后台管理界面(1登录) 使用 vue2.x + ElementUI 快速搭建一个后台 增删改查 管理界面 vue+element-ui 实现数据的增删改查以及分页（举例新增学生） SpringBoot+Vue+Element-ui前后端分离(增删改查)(八) insert into user VALUES(1,'张三','3612gsa','管理员'); insert into user VALUES(2,'李四'
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值