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

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装&#xff1b;只需暴露 19530&#xff08;gRPC&#xff09;与 9091&#xff08;HTTP/WebUI&#xff09;两个端口&#xff0c;即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...

LangChain知识库管理后端接口:数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...

解析奥地利 XARION激光超声检测系统:无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用

在工业制造领域&#xff0c;无损检测&#xff08;NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统&#xff0c;以非接触式光学麦克风技术为核心&#xff0c;打破传统检测瓶颈&#xff0c;为半导体、航空航天、汽车制造等行业提供了高灵敏…...

stm32wle5 lpuart DMA数据不接收

配置波特率9600时&#xff0c;需要使用外部低速晶振...