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);

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

掘金量化—Python SDK文档—4.数据结构

目录 Python SDK文档 4.数据结构 4.1数据类 Tick - Tick 对象 报价quote - (dict 类型) Bar - Bar 对象 L2Order - Level2 逐笔委托 L2Transaction - Level2 逐笔成交 4.2交易类 Account - 账户对象 Order - 委托对象 ExecRpt - 回报对象 Cash - 资金对象 Position - 持仓对象…

Windows操纵kafka

这里写目录标题 启动kafk创建一个测试主题查看所有主题查看first详细信息修改分区数(分区数只能增加 不能减少)删除主题生产者生产数据消费命令 启动kafk 安装目录下 .\bin\windows\kafka-server-start.bat .\config\server.properties创建一个测试主题 安装目录下 .\bin\wi…

从零学习微服务

更新中&#xff0c;关注不断更… 如果觉得需要补充哪些内容&#xff0c;可以在评论区留言或者私信我哦 文章目录 &#x1f31f;引入&#x1f3b6;Feign&#x1f63a;Ribbon&#x1f40e;Naocs&#x1f368;Gateway&#x1f36c;Docker&#x1f6a2;RabbitMQsentinelseata &…

SpringBoot + Docker 实现一次构建到处运行

一、容器化部署的好处 Docker 作为一种新兴的虚拟化方式&#xff0c;它可以更高效的利用系统资源&#xff0c;不需要进行硬件虚拟以及运行完整操作系统等额外开销。 传统的虚拟机技术启动应用服务往往需要数分钟&#xff0c;而 Docker 容器应用&#xff0c;由于直接运行宿主内…

程序员如何制作PPT?

有道无术&#xff0c;术尚可求也&#xff1b;有术无道&#xff0c;止于术。大家好&#xff0c;我是程序员雪球&#xff0c;今天让我们一起探讨如何从零开始制作高质量的 PPT。 上周&#xff0c;领导要求我撰写一份关于 4到6月持续集成运营分析的报告&#xff0c;并通过 PPT 的形…

【25】SCI易中期刊推荐——神经网络科学(中科院4区)

💖💖>>>加勒比海带,QQ2479200884<<<💖💖 🍀🍀>>>【YOLO魔法搭配&论文投稿咨询】<<<🍀🍀 ✨✨>>>学习交流 | 温澜潮生 | 合作共赢 | 共同进步<<<✨✨ 📚📚>>>人工智能 | 计算机视觉…

漫谈大数据时代的个人信息安全(三)——“点赞之交”

大数据时代的个人信息安全系列三&#xff1a;“点赞之交” 1. 点赞之交2. 点赞诈骗3. 个人信息保护小贴士 互联网就像公路&#xff0c;用户使用它&#xff0c;就会留下脚印。 每个人都在无时不刻的产生数据&#xff0c;在消费数据的同时&#xff0c;也在被数据消费。 近日&am…

何时使用Windbg静态分析?何时使用Windbg动态调试?

目录 1、概述 2、使用Windbg静态分析dump文件 2.1、异常捕获模块自动生成dump文件 2.2、从Windows任务管理器中导出dump文件 2.3、从正在动态调试的Windbg中使用命令导出dump文件 2.4、使用Windbg静态分析dump文件的一般步骤 3、使用Windbg动态调试目标进程 3.1、程序发…

animation.css无法显示动画效果问题解决

在使用【微信开发者工具】开发微信小程序时发现无法在开发者工具中展示出动画效果来 但是真机调试中可以正常的显示动画效果 【关于微信小程序中如何使用animation.css&#xff0c;参考微信小程序使用animation.css_THE WHY的博客-CSDN博客 】 同时发现在官网上点击各个动画并…

oled拼接屏在柳州的户外广告中有哪些应用展现?

柳州oled拼接屏是一种高端的显示屏&#xff0c;它采用了OLED技术&#xff0c;具有高亮度、高对比度、高色彩饱和度、高刷新率等优点&#xff0c;能够呈现出更加真实、清晰、细腻的图像效果。 同时&#xff0c;柳州oled拼接屏还具有拼接功能&#xff0c;可以将多个屏幕拼接在一…

Http 接口测试框架

目录 前言&#xff1a; 实际效果 框架的下一步 最新框架图&#xff08;红色部分未完成&#xff09; 部分代码 你需要做的 前言&#xff1a; 在进行HTTP接口测试时&#xff0c;使用一个可靠的测试框架可以提高测试效率和质量。HTTP接口测试框架是一种用于自动化测试HTTP接…

Appium-Python-Client 源码剖析 (一) driver 的元素查找方法

目录 前言 源码版本:0.9 结构图&#xff1a; mobileby.py appium 的 webdriver.py selenium 的 webdriver.py seleniumdriver appiumdriver 前言 Appium-Python-Client是一个用于Python语言的Appium客户端库&#xff0c;它提供了丰富的API和功能&#xff0c;用于编写和…

FFmpeg 命令行实现居中高清上下模糊播放效果

FFmpeg 命令行实现居中高清上下模糊播放效果。 1、16:9 的横屏原视频&#xff0c;以 16:9 竖屏上下模糊播放 以该效果播放视频的命令如下&#xff1a; ffplay -i horizontal_test_video_169.mp4 -vf \ "split[a][b]; \ [a]crop(ih/16*9):ih,scaleiw/10:-1,gblursigma5…

周考一之重做

输入一个学生的成绩&#xff0c;如果学习成绩>90分的同学用A表示&#xff0c;60-89分之间用B表示&#xff0c;60分以下的用C表示(10) public static void main(String[] args){ Scanner scanner new Scanner(System.in); System.out.println(“请输入学生成绩&#xff1a;…

短视频seo抖音矩阵号系统源码开发搭建分享

我们自主研发的短视频矩阵系统源码&#xff0c;技术研发的独立核心算法的视频内容管理和展示功能。无需额外的流量接口费用和复杂的配置&#xff0c;轻松地创建和管理短视频内容&#xff0c;短视频矩阵源码是指将抖音平台上的视频资源进行筛选、排序等操作&#xff0c;进而提升…

Python应用实例(二)数据可视化(一)

数据可视化&#xff08;一&#xff09; 1.安装Matplotlib2.绘制简单的折线图2.1 修改标签文字和线条粗细2.2 矫正图形2.3 使用内置样式2.4 使用scatter()绘制散点图并设置样式2.5 使用scatter()绘制一系列点2.6 自动计算数据2.7 自定义颜色2.8 使用颜色映射2.9 自动保存图表 数…

一文详解 requests 库中 json 参数和 data 参数的用法

在requests库当中&#xff0c;requests请求方法&#xff0c;当发送post/put/delete等带有请求体的请求时&#xff0c;有json和data2个参数可选。 众所周知&#xff0c;http请求的请求体格式主要有以下4种&#xff1a; application/jsonapplicaiton/x-www-from-urlencodedmult…

国内流行的数据可视化软件工具

在信息爆炸的时代&#xff0c;越来越多的数据堆积如山。但是&#xff0c;这些密集的数据没有重点且可读性较差。因此&#xff0c;我们需要数据可视化来帮助数据易于理解和接受。相比之下&#xff0c;可视化更直观、更有意义&#xff0c;使用适当的数据可视化工具来可视化数据非…

接下来讲一讲Vue的数据代理

首先讲一下原生js的数据代理 原生的 Object.defineProperty() let aa wewewlet person {name: "王李斌",age: 12} Object.defineProperty(person, "address", {// value: 14&#xff0c; 给字段设置值//enumerable:true, 设置动态设置的字段为可以遍历/…

C# MVC 多图片上传预览

一.效果图&#xff1a; 开发框架&#xff1a;MVC&#xff0c;Layui 列表主界面这里就不展示了&#xff0c;可以去看看这篇文章&#xff1a;Layui项目实战&#xff0c;这里讲的是“上传Banner”界面功能&#xff1a; 其中包括&#xff0c;多文件上传&#xff0c;预览&#xff0c…