Dcat-admin使用 Alpine 双向数据绑定

介绍

Alpine.js 这东西真的轻量级,和vue相似,和 livewire 同一个作者,推荐大家使用,可以平替jquery

效果

在这里插入图片描述

实现

在 bootstrap.php 引入js

Admin::headerJs(['https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-y/alpinejs/3.9.0/cdn.min.js',]);

自定义表单初始化

     $data = $this->data;$text = $data[SysDict::KEY_MERCHANT_YM_APP_WEB] ?? '';$this->setHtmlAttribute(['x-data' => "{ open: false , text:'$text' }",]);

类似 v-model 绑定到组件

  $this->url(SysDict::KEY_MERCHANT_YM_APP_WEB, '备案网站')->required()->attribute(['x-model' => 'text',]);

在自定义表单输出

        $this->html(<<<HTML首页信息: <span x-text="text"></span>
HTML);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/1639.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在Windows下安装Anaconda平台

Anaconda介绍 安装Python的方法有很多&#xff0c;其中利用Anaconda来安装&#xff0c;是最为安全和便捷的方法之一。在Python中安装类库&#xff0c;各个类库之间可能存在相互依赖、版本冲突等问题。为了解决这个问题&#xff0c;Python社区提供了方便的软件包管理工具&#…

Swift 中的 Actors 使用以及如何防止数据竞争

文章目录 前言Actors 的基本原理Actor 是引用类型&#xff0c;但与类相比仍然有所不同 为什么会出现数据竞争如何防止数据竞争使用 async/await 访问数据防止不必要的暂停非隔离(nonisolated)访问为什么在使用 Actors 时仍会出现数据竞争&#xff1f;总结 前言 Actors 是 Swif…

mongodb,redis,mysql 区别

一、MySQL 关系型数据库。 在不同的引擎上有不同 的存储方式。 查询语句是使用传统的sql语句&#xff0c;拥有较为成熟的体系&#xff0c;成熟度很高。 开源数据库的份额在不断增加&#xff0c;mysql的份额页在持续增长。 缺点就是在海量数据处理的时候效率会显著变慢。 二、Mo…

CDA数据分析系01 anaconda

简介 数据处理集成包&#xff0c;不局限于python 创建一个新的environment conda create --name python34 python3.4 激活一个environment activate python34 # for windows conda的package管理 类似pip&#xff0c;conda install xxxx 查看已安装的python包 conda list…

如何用Three.js + Blender打造一个web 3D展览馆

作者&#xff1a;vivo 互联网前端团队- Wei Xing 运营活动新玩法层出不穷&#xff0c;web 3D炙手可热&#xff0c;本文将一步步带大家了解如何利用Three.js和Blender来打造一个沉浸式web 3D展览馆。 一、前言 3D展览馆是什么&#xff0c;先来预览下效果&#xff1a; 看起来像…

【电路原理学习笔记】第4章:能量与功率:4.5 稳压电源与电池

第4章&#xff1a;能量与功率 4.5 稳压电源与电池 电网采用交流电形式将电能从发电站传输给用户&#xff0c;这是因为交流电易于转换成适宜传输的高压和终端用户使用的低压。在远距离传输时&#xff0c;采用高电压传输的效率和效益要高得多。对于给定的功率&#xff0c;较高的…

蓝桥杯,我劝你不要参加的8个完美理由

蓝桥杯&#xff0c;是一个全国高校的IT技术比拼&#xff0c;如果你参加了&#xff0c;可能不止是刷题数量的剧增&#xff0c;还有你的软件人生 我劝你不要参加&#xff0c;因为如果你参加了&#xff0c;可能会有以下烦恼&#xff1a; 目录 1、会让你变得上进 2、会提前感受码…

http连接处理(中)(四)

2. 结合代码分析请求报文解析 上一节我们对http连接的基础知识、服务器接收请求的处理流程进行了介绍&#xff0c;接下来将结合流程图和代码分别对状态机和服务器解析请求报文进行详解。 流程图部分&#xff0c;描述主、从状态机调用关系与状态转移过程。 代码部分&#xff…

【云原生】k8s之Ingress

1.Ingress的相关知识 1.1 Ingress的简介 service的作用体现在两个方面&#xff0c;对集群内部&#xff0c;它不断跟踪pod的变化&#xff0c;更新endpoint中对应pod的对象&#xff0c;提供了ip不断变化的pod的服务发现机制&#xff1b;对集群外部&#xff0c;他类似负载均衡器…

HTML5学习简记(更新中~)

目录 HTML定义 标签 HTML基本骨架 常见标签 标题标签 段落标签 换行与水平线标签 文本格式化标签 图像标签 绝对路径与相对路径 超链接标签 音频与视频标签 列表标签 无序列表 有序列表 定义列表 表格标签 表格结构标签 合并单元格 表单标签 input标签 input标签占…

linux中的sendmail发送邮件

Linux/UNIX 下的老牌邮件服务器。 Sendmail 作为一种免费的邮件服务器软件&#xff0c;已被广泛的应用于各种服务器中&#xff0c;它在稳定性、可移植性、及确保没有 bug 等方面具有一定的特色&#xff0c;且可以在网络中搜索到大量的使用资料。 一、邮件发送原理图 MUA&#x…

腾讯云对象存储联合DataBend云数仓打通数据湖和数据仓库

随着数字化进程不断深入&#xff0c;数据呈大规模、多样性的爆发式增长。为满足更多样、更复杂的业务数据处理分析的诉求&#xff0c;湖仓一体应运而生。在Gartner发布的《Hype Cycle for Data Management 2021》中&#xff0c;湖仓一体&#xff08;Lake house&#xff09;首次…

性能测试学习阶段性总结

目录 1.前言 2.概念部分 2.1不同角度看软件性能 2.2关键词 2.3测试的方法 2.4应用领域 3.性能测试过程模型&#xff08;PTGM&#xff09; 2.1测试前期准备 2.2测试工具引入 2.3测试计划 2.4测试设计与开发 2.5测试执行和管理 2.6测试分析 总结&#xff1a; 1.前言…

Django admin管理工具TabularInline表格内联

详解 TabularInline 是 Django Admin 中的一个内联模型选项&#xff0c;用于在父模型的编辑页面中以表格形式显示关联的子模型对象。下面是对 TabularInline 的一些详解&#xff1a; 显示方式&#xff1a;TabularInline 以表格的形式显示子模型对象。每个子模型对象将以一行的…

vue实现左右布局(右侧超出的时候换行展示)

目录 vue实现左右布局(右侧超出的时候换行展示)code效果 vue实现左右布局(右侧超出的时候换行展示) code <ul class"body-detail"><li><div class"li-label">姓名</div><div class"li-value">XXXXXXXXXXXXXXXXXX…

SpringBoot 实现 elasticsearch 查询操作(RestHighLevelClient 的案例实战)

文章目录 1. 环境准备1. 查询全部2. 根据 name 查询 match 分词查询3. 根据 name 和 品牌查询 multiMatch 分词查询4. 根据 brand 查询 match 分词查询5. 按照价格 范围查询6. 精确查询7. boolQuery8. 分页9. 高亮查询9. 公共解析 上一节讲述了 SpringBoot 实现 elasticsearch …

Sentinel整合OpenFegin

之前学习了openFeign的使用&#xff0c;我是超链接 现在学习通过Sentinel来进行整合OpenFegin。 引入OpenFegin 我们需要在当前的8084项目中引入对应的依赖 <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-sta…

栈练习题(逆波兰表达式,有效括号,出入栈次序匹配,最小栈)

目录 基础知识: 中缀表达式和后缀表达式(逆波兰式) 中缀表达式转后缀表达式 后缀表达式求结果 有效括号 栈的压入,弹出序列 最小元素栈 基础知识: 栈:是一种先入后出的数据结构,它的底层是由数组实现的 入栈:push(),出栈pop(),查看栈顶元素peek() 中缀表达式和后缀表…

SpringBoot 集成 EasyExcel 3.x 实现 Excel 导出

目录 EasyExcel官方文档 EasyExcel是什么&#xff1f; EasyExcel注解 springboot集成EasyExcel 简单入门导出 &#xff1a; 实体类 自定义转换类 测试一下 复杂表头一对多导出 &#xff1a; 自定义注解 定义实体类 自定义单元格合并策略 测试一下 EasyExcel官方文档 …

SpringCloud学习路线(5)—— Nacos配置管理

一、统一配置管理 需求&#xff1a; 微服务配置能实现统一的管理&#xff0c;比如希望改动多个配置&#xff0c;但不希望逐个配置&#xff0c;而是在一个位置中改动&#xff0c;并且服务不用重启即用&#xff08;热更新&#xff09;。 &#xff08;一&#xff09;使用配置管理…