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

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

Angular微前端架构:Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

C++:多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

Linux 中如何提取压缩文件 ?

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...

TSN交换机正在重构工业网络,PROFINET和EtherCAT会被取代吗?

在工业自动化持续演进的今天&#xff0c;通信网络的角色正变得愈发关键。 2025年6月6日&#xff0c;为期三天的华南国际工业博览会在深圳国际会展中心&#xff08;宝安&#xff09;圆满落幕。作为国内工业通信领域的技术型企业&#xff0c;光路科技&#xff08;Fiberroad&…...

适应性Java用于现代 API:REST、GraphQL 和事件驱动

在快速发展的软件开发领域&#xff0c;REST、GraphQL 和事件驱动架构等新的 API 标准对于构建可扩展、高效的系统至关重要。Java 在现代 API 方面以其在企业应用中的稳定性而闻名&#xff0c;不断适应这些现代范式的需求。随着不断发展的生态系统&#xff0c;Java 在现代 API 方…...

ArcPy扩展模块的使用(3)

管理工程项目 arcpy.mp模块允许用户管理布局、地图、报表、文件夹连接、视图等工程项目。例如&#xff0c;可以更新、修复或替换图层数据源&#xff0c;修改图层的符号系统&#xff0c;甚至自动在线执行共享要托管在组织中的工程项。 以下代码展示了如何更新图层的数据源&…...

npm安装electron下载太慢,导致报错

npm安装electron下载太慢&#xff0c;导致报错 背景 想学习electron框架做个桌面应用&#xff0c;卡在了安装依赖&#xff08;无语了&#xff09;。。。一开始以为node版本或者npm版本太低问题&#xff0c;调整版本后还是报错。偶尔执行install命令后&#xff0c;可以开始下载…...