当前位置: 首页 > news >正文

在layui中使用vue,使用vue进行页面数据部分数据更新

  • layui是一款非常优秀的框架,使用也非常的广泛,许多后台管理系统都使用layui,简单便捷,但是在涉及页面部分数据变化,就比较难以处理,比如一个页面一个提交页,提交之后部分数据实时进行更新,根据数据动态控制元素显示等。这些情况使用layui就需要自己用原始js方式去控制dom比较的麻烦,vue动态双向绑定的特性刚好可以引入来解决复杂场景的问题

vue引入渲染

  • 在对应需要的页面引入vue,需要提前下载好vue.js
<script src="/assets/js/vue.js"></script>
  • 这里以一个简单列表渲染为例子,下面vue使用自定义分隔符delimiters,避免与模板引擎产生冲突,如模板引擎渲染分隔符不为{{}},可以不用自定义
<div class="layui-fluid"><div class="layui-row layui-col-space15" id="app"><table class="layui-table"><thead><tr><th>序号</th><th>姓名</th><th>年龄</th><th>城市</th></tr></thead><tbody><tr v-for="(item,index) in tableList"><td>${index}</td><td>${item.name}</td><td>${item.age}</td><td>${item.city}</td></tr></tbody></table></div>
</div><script>layui.use(['form','table'],function () {var form = layui.form;var table = layui.table;var app = new Vue({el: '#app',delimiters: ['${', '}'],//自定义分隔符data:{tableList:[{name:'小明',age:'18',city:'武汉'},{name:'小红',age:'20',city:'杭州'},{name:'小建',age:'23',city:'成都'},]}})})</script>

在这里插入图片描述

请求数据修改数据

  • 上面只是简单的数据渲染,时间开发中数据都是来源于接口请求,在layui中基本都是使用jQuery的ajax去请求接口,我们将上面的表格进行接口请求来刷新数据
<div class="layui-fluid"><div class="layui-row layui-col-space15" id="app"><table class="layui-table"><thead><tr><th>序号</th><th>姓名</th><th>年龄</th><th>城市</th></tr></thead><tbody><tr v-for="(item,index) in tableList"><td>${index}</td><td>${item.name}</td><td>${item.age}</td><td>${item.city}</td></tr></tbody></table><button class="layui-btn" id="btn">请求接口</button></div>
</div><script>layui.use(['form','table'],function () {var form = layui.form;var table = layui.table;var app = new Vue({el: '#app',delimiters: ['${', '}'],//自定义分隔符data:{tableList:[{name:'小明',age:'18',city:'武汉'},{name:'小红',age:'20',city:'杭州'},{name:'小建',age:'23',city:'成都'},]}})$('#btn').click(function () {$.ajax({type:'post',data:{id:'123456'},url:'/post',success:function (data) {app.tableList = data//进行vue数据赋值}})})})</script>

在这里插入图片描述

相关文章:

在layui中使用vue,使用vue进行页面数据部分数据更新

layui是一款非常优秀的框架&#xff0c;使用也非常的广泛&#xff0c;许多后台管理系统都使用layui&#xff0c;简单便捷&#xff0c;但是在涉及页面部分数据变化&#xff0c;就比较难以处理&#xff0c;比如一个页面一个提交页&#xff0c;提交之后部分数据实时进行更新&#…...

Vue中如何进行数据导入与Excel导入

Vue中如何进行数据导入与Excel导入 Vue是一款非常流行的JavaScript框架&#xff0c;它提供了一套用于构建用户界面的工具和库。在Vue中&#xff0c;我们可以使用多种方式来导入数据&#xff0c;包括从服务器获取数据、从本地存储获取数据、从文件中读取数据等等。其中&#xf…...

git 的基本操作

1. git建立本地仓库 在想要建立的目录下输入命令 git init 我们可以看一下 .git目录下有什么 2. 配置git本地仓库 配置用户的 name 和 email 命令&#xff1a;git config [...] 配置完后&#xff0c;我们像查看一下 刚才的配置 2.1 查看配置命令 git config -l 2.2 删除…...

搭建Vue项目以及项目的常见知识

前言&#xff1a;使用脚手架搭建vue项目&#xff0c;使用脚手架可以开发者能够开箱即用快速地进行应用开发而开发。 搭建 #创建一个基于 webpack 模板的新项目 vue init webpack my-project #选择所需要的选项如图&#xff1a; cd my-project npm run dev访问localhost:808…...

TypeScript ~ TS Webpack构建工具 ⑦

作者 : SYFStrive 博客首页 : HomePage &#x1f4dc;&#xff1a; TypeScript ~ TS &#x1f4cc;&#xff1a;个人社区&#xff08;欢迎大佬们加入&#xff09; &#x1f449;&#xff1a;社区链接&#x1f517; &#x1f4cc;&#xff1a;觉得文章不错可以点点关注 &…...

Rust 自建HTTP Server支持图片响应

本博客是在杨旭老师的 rust web 全栈教程项目基础上进行修改&#xff0c;支持了图片资源返回&#xff0c;杨旭老师的rust web链接如下&#xff1a; https://www.bilibili.com/video/BV1RP4y1G7KFp1&vd_source8595fbbf160cc11a0cc07cadacf22951 本人默认读者已经学习了相关…...

[游戏开发][Unity]UnityWebRequest使用大全

首先记录个小问题 使用new UnityWebRequest的方式&#xff0c;最终的downloadHandler是个null 使用UnityWebRequest.Get的方式&#xff0c;最终的downloadHandler会是DownloadHandlerBuffer 从网站或本地下载内容&#xff0c;包括文本或二进制数据 IEnumerator downloadfile(st…...

如何使用Fiddler对手机进行弱网测试?(干货教程)

1.首先&#xff0c;fiddler连接手机 1)Tools->Options->Connections->设置端口8888&#xff0c;勾选Allow remote computers to connect 2)配置手机 注&#xff1a;手机和电脑需要在同一局域网下 手机进入网络详情&#xff0c;将代理改为手动 设置主机名、端口 主机…...

专业科普:什么是单片机?

一、什么是单片机 单片机诞生于20世纪70年代末&#xff0c;它是指一个集成在一块芯片上的完整计算机系统。单片机具有一个完整计算机所需要的大部分部件&#xff1a;CPU、内存、内部和外部总线系统&#xff0c;目前大部分还会具有外存。同时集成诸如通讯接口、定时器&#xff…...

深度学习-第T11周——优化器对比实验

深度学习-第T11周——优化器对比实验 深度学习-第T11周——优化器对比实验一、前言二、我的环境三、前期工作1、导入数据集2、查看图片数目3、查看数据 四、数据预处理1、 加载数据1、设置图片格式2、划分训练集3、划分验证集4、查看标签 2、数据可视化3、检查数据4、配置数据集…...

基于Dlib的疲劳检测系统

需要源码的朋友可以私信我 基于Dlib的疲劳检测系统 1、设计背景及要求2、系统分析3、系统设计3.1功能结构图3.2基于EAR、MAR和HPE算法的疲劳检测3.2.1基于EAR算法的眨眼检测3.2.2基于MAR算法的哈欠检测3.3.3基于HPE算法的点头检测 4、系统实现与调试4.1初步实现4.2具体实现过程…...

three.js通过CubeTexture加载环境贴图,和RGBELoader加载器加载hdr环境贴图

一、使用CubeTexture进行环境贴图 1.CubeTexture使用介绍 Three.js中可以通过使用CubeTexture进行环境贴图&#xff0c;CubeTexture需要将6张图片&#xff08;正面、反面、上下左右&#xff09;包装成一个立方体纹理。下面是一个简单的例子&#xff1a; 首先需要加载六张贴图…...

pycharm中Terminal输入sqlite3,出现无法将sqlite项识别为cmdlet**的解决方法

前提&#xff1a;本机上已安装sqlite3&#xff0c;安装详见&#xff1a;pycharm社区版中安装配置sqlite3_Sunshine_0426的博客-CSDN博客 问题&#xff1a; cmd命令行中或pycharm中Terminal行输入sqlite3 db.sqlite3命令后&#xff0c;出现“无法将“sqlite3”项识别为 cmdlet…...

VSCode 安装配置教程详解包含c++环境配置方法

vscode安装教程及c环境配置详解 vscode下载安装下载C扩展插件VScode C环境配置配置环境变量检查 MinGW 安装配置编译器&#xff1a;配置构建任务检查是否安装了编译器配置完毕 vscode下载安装 地址&#xff1a;官网下载地址 直接打开下载好的.exe文件进行安装即可&#xff0…...

Baumer工业相机堡盟工业相机如何通过BGAPISDK将图像放大缩小显示(C#)

Baumer工业相机堡盟工业相机如何通过BGAPISDK将图像放大缩小显示&#xff08;C#&#xff09; Baumer工业相机Baumer工业相机BGAPISDK和图像放大缩小的技术背景Baumer工业相机通过BGAPISDK将相机图像图像放大缩小功能1.引用合适的类文件2.通过BGAPISDK将相机图像图像放大缩小功能…...

8.1 PowerBI系列之DAX函数专题-进阶-解决列排序对计算的影响

需求 下列矩阵中&#xff0c;在月份列不按照原始数据的month_no排列时&#xff0c;能正确计算销售额占比&#xff0c;但是当月份按照month_no排序时就会出错&#xff0c;需要解决这个问题。 实现 month % divide([amount],calculate([amount],all(date[month desc]))) //排…...

Java的第十二篇文章——集合

目录 第十二章 集合 学习目标 1. 集合框架的由来 2. 集合框架的继承体系 3. Collection接口 3.1 Collection接口的常用方法 4. Iterator接口 4.1 Iterator接口的抽象方法 4.2 获取迭代器接口实现类 4.3 迭代器的实现原理 4.4 并发修改异常 4.5 集合存储自定义对象并…...

docker 镜像制作 与 CI/CD

目录 镜像到底是什么&#xff1f; 使用docker创建镜像 步骤&#xff1a; 1、编辑Dockerfile&#xff08;Dockerfile是docker制作镜像的配方文件&#xff09; 2、编辑requirements.txt文件 3、编辑app.py文件&#xff0c;我们的程序文件 4、生成镜像文件 5、查看生成的镜…...

Spring Boot 异常报告器解析

基于Spring Boot 3.1.0 系列文章 Spring Boot 源码阅读初始化环境搭建Spring Boot 框架整体启动流程详解Spring Boot 系统初始化器详解Spring Boot 监听器详解Spring Boot banner详解Spring Boot 属性配置解析Spring Boot 属性加载原理解析Spring Boot 异常报告器解析 创建自定…...

瑞亚太空活动公司RSA与英国国防与安全加速器达成量子项目合作

​ &#xff08;图片来源&#xff1a;网络&#xff09; 瑞亚太空活动公司&#xff08;RSA&#xff09;与英国国防与安全加速器&#xff08;DASA&#xff09;签署了合作协议&#xff0c;主要开发名为“无限交换”的可操纵量子真空的技术项目。这是RSA在英国签订的第一份合同&…...

App无辜躺枪?手把手教你搞定腾讯手机管家误报导致的应用商店下架

当合规应用遭遇误报下架&#xff1a;开发者系统性应对指南运动健康类应用被标记为金融诈骗软件&#xff1f;社交工具因"病毒风险"被各大商店紧急下架&#xff1f;这类看似荒谬的误报事件&#xff0c;正在成为中小开发团队的"无妄之灾"。某知名运动App开发团…...

从分立逻辑到单片机:基于ATmega8的MIDI通道分析仪设计与实现

1. 项目概述&#xff1a;从分立逻辑到单片机的MIDI通道分析仪进化史二十年前&#xff0c;当我在《Elektor》杂志上发表第一版MIDI通道分析仪时&#xff0c;整个数字音乐世界还处于一个相当“硬核”的阶段。那个版本的设计&#xff0c;用今天的话来说&#xff0c;简直就是一场“…...

ARMv8 HFGITR_EL2寄存器解析与虚拟化指令陷阱控制

1. AArch64 HFGITR_EL2寄存器架构解析HFGITR_EL2&#xff08;Hypervisor Fine-Grained Instruction Trap Register&#xff09;是ARMv8架构中专门用于指令级陷阱控制的系统寄存器&#xff0c;属于虚拟化扩展的重要组成部分。这个64位寄存器通过位映射机制实现对特定AArch64指令…...

SSH工具对比:新手用户和熟练运维,选型逻辑有什么不同

结论 新手用户和熟练运维在选择 SSH 工具时&#xff0c;关注点往往完全不同。 新手更在意的是&#xff1a;能不能顺利连接、界面是否直观、文件和配置是否容易找到、网站出问题时能不能快速定位。 而熟练运维更在意的是&#xff1a;连接效率、命令自由度、多服务器管理能力、原…...

GitLab External Wiki代理权限绕过漏洞深度解析

1. 这个漏洞不是“修个补丁”就能完事的——它暴露的是 GitLab 权限模型里一个被长期忽视的逻辑断层GitLab 安全漏洞 CVE-2025-2614&#xff0c;光看编号容易误以为是又一个常规的越权或 XSS 类型漏洞。但我在实际复现和审计过程中发现&#xff0c;它根本不是配置疏漏或代码拼写…...

Linux服务器被挖矿木马劫持的五步应急处置指南

1. 这不是“中病毒”&#xff0c;是服务器被劫持成了矿机——先别慌&#xff0c;但必须立刻断网“服务器被黑客攻击&#xff0c;用来挖矿&#xff01;”——这句话在运维圈里一出&#xff0c;比收到OOM告警还让人头皮发紧。它不像网页被挂马、数据库被拖库那样有明显业务影响&a…...

AI率总超标?2026年AI写作辅助网站排行榜权威发布,轻松定稿不是梦!

写论文效率低、熬夜赶稿、查重不过关&#xff1f;别慌&#xff01;2026 年最新 AI 论文写作工具合集来了&#xff0c;覆盖选题、大纲、初稿、润色、降重、格式、文献引用全流程&#xff0c;帮你精准匹配最适合的学术助手&#xff0c;彻底告别论文内耗&#xff01;&#x1f3c6;…...

解决方法:庐山派K230接串口没识别到端口问题

一、插入usb转串口工具之前二、插入usb转串口工具之后三、解决方法说明&#xff1a;&#x1f50d; 核心原因&#xff1a;USB Serial 设备&#xff0c;没有被识别为 COM 口你现在看到的 USB Serial&#xff0c;说明开发板已经正常启动了&#xff0c;USB 也被电脑识别到了&#x…...

因果推断与机器学习融合:量化分析社会运动中镇压与抗议的动态关系

1. 项目概述&#xff1a;当数据科学遇见社会运动如果你研究过社会运动&#xff0c;尤其是那些看似突然爆发、席卷全国的抗议浪潮&#xff0c;你可能会被一个核心问题困扰&#xff1a;国家机器的镇压&#xff0c;究竟是浇灭火焰的冷水&#xff0c;还是火上浇油的催化剂&#xff…...

基于STM32与LoRa的低功耗物联网气象站DIY全攻略

1. 项目概述&#xff1a;打造一个低功耗的家庭气象站前阵子想给家里的智能家居系统加点“环境感知”能力&#xff0c;琢磨着搞个能实时监测室外温湿度、风速风向的小玩意儿。市面上成品气象站要么数据出不来&#xff0c;要么功耗感人&#xff0c;不适合长期户外部署。于是&…...