当前位置: 首页 > 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在英国签订的第一份合同&…...

Unity主题系统设计:状态驱动的主题抽象与自动注入方案

1. 这不是换个颜色那么简单&#xff1a;为什么Unity项目里“换肤”总在发布前夜崩盘&#xff1f;你有没有经历过这样的场景&#xff1a;美术同学凌晨两点发来一套新主题资源包&#xff0c;UI设计师说“这次配色更符合品牌调性”&#xff0c;产品说“上线前必须支持深色模式”&a…...

3步解锁专业级MMD创作:Blender插件如何重塑二次元动画工作流

3步解锁专业级MMD创作&#xff1a;Blender插件如何重塑二次元动画工作流 【免费下载链接】blender_mmd_tools MMD Tools is a blender addon for importing/exporting Models and Motions of MikuMikuDance. 项目地址: https://gitcode.com/gh_mirrors/bl/blender_mmd_tools …...

全链路压测实战:双十一级别的流量,我是这样扛住的

作为一名在质量保障领域摸爬滚打多年的测试工程师&#xff0c;我深知传统的单接口压测在如今分布式架构下的无力感。当业务流量达到双十一这种脉冲式、高并发的级别时&#xff0c;任何一个非核心链路上的“短板”都可能引发系统性的雪崩。全链路压测不再是选择题&#xff0c;而…...

2026长沙智能家居品牌实测,这些本地老牌值得选

2026年&#xff0c;长沙的智能家居市场已经从“概念热”转向“落地战”。我走访了长沙多个本地服务商&#xff0c;实测了不同品牌在别墅、酒店、大平层等场景的真实表现。今天&#xff0c;结合数据与案例&#xff0c;分享几个值得关注的本地品牌&#xff0c;尤其是深耕8年以上的…...

Godot4 2D游戏开发避坑指南:TileMap绘制、节点顺序与相机设置的三个常见问题

Godot4 2D游戏开发避坑指南&#xff1a;TileMap绘制、节点顺序与相机设置的三个常见问题当你第一次用Godot4完成一个2D场景搭建时&#xff0c;那种成就感往往会被几个突如其来的bug瞬间击碎——角色神秘消失、背景纹丝不动、屏幕边缘出现诡异黑边。这些问题看似简单&#xff0c…...

AI IDE 革命:程序员正在被重新定义

很多开发者第一次使用 Cursor 的 CtrlK 或 Composer&#xff08;高级多文件编辑模式&#xff09;时&#xff0c;都会有一种强烈的、甚至让人有些脊背发凉的冲击感。 因为&#xff1a; 它已经不再是那个我们熟悉的、只能在原地等待光标落下的&#xff1a; “代码自动补全插件&am…...

别再死磕USB HID了!用ESP32的Arduino框架手把手教你实现蓝牙鼠标键盘(附完整代码)

ESP32蓝牙HID实战&#xff1a;零基础打造自定义键盘鼠标 手里那块吃灰的ESP32开发板终于能派上用场了&#xff01;上周我用它做了个无线演示控制器&#xff0c;在会议室里走着就能翻PPT&#xff0c;同事们都问是怎么实现的。其实秘诀就在于ESP32的蓝牙HID功能——不需要任何USB…...

CUDA并行计算与FSR框架优化实践

1. CUDA并行计算与FSR框架概述在GPU加速计算领域&#xff0c;CUDA&#xff08;Compute Unified Device Architecture&#xff09;作为NVIDIA推出的并行计算平台和编程模型&#xff0c;已经成为高性能计算的事实标准。其核心设计理念是将计算任务分解为网格&#xff08;Grid&…...

RevSSH反向SSH隧道:无公网IP设备的安全远程运维方案

1. 这不是又一个SSH封装工具——RevSSH解决的是“根本性连接悖论”你有没有遇到过这样的场景&#xff1a;一台部署在客户内网的嵌入式设备&#xff0c;没有公网IP&#xff0c;NAT穿透失败&#xff0c;防火墙策略死死锁住所有入向端口&#xff0c;连ICMP都被禁了&#xff1b;或者…...

【数据结构与算法】数据结构基础——栈和队列

目录栈和队列1. 栈1.1 栈的概念1.2 栈的实现方式分析1.3 栈的实现1.3.1 栈的初始化与销毁1.3.2 入栈与出栈1.3.3 栈的判空与有效元素个数1.3.4 栈顶元素1.4 栈的扩展1.4.1 两栈共享空间2. 队列2.1 队列的概念2.2 队列的实现方式分析2.3 队列的实现2.3.1 队列的初始化与销毁2.3.…...