前端库演示集合
首页
演示页面
Grid.js 表格
Lightbox2 图片
Chart.js 图表
Swiper 轮播
Alpine.js 响应式
HTMX 动态加载
SweetAlert2 弹窗
工具库演示
Alpine.js 响应式组件演示
轻量级响应式JavaScript框架,让HTML具备响应性
官方文档
响应式计数器
减少
重置
增加
步长设置:
当前步长:
实时状态
当前计数:
步长:
是否为正数:
是否为偶数:
绝对值:
待办事项管理
添加
全部
进行中
已完成
清空已完成
暂无待办事项
统计信息
总计
进行中
已完成
完成率
动态标签页
新增标签
删除标签
标签信息
ID:
字符数:
行数:
创建时间:
实时表单验证
用户名
*
邮箱
*
密码
*
确认密码
*
我同意用户协议和隐私政策
*
提交表单
验证状态
通过验证
验证错误
用户名:
邮箱:
密码:
确认密码:
用户协议:
购物车管理
商品列表
购物车
购物车为空
¥
-
+
商品总计:
运费:
总计:
结算
清空购物车
Alpine.js 主要特性
轻量级
仅21KB (gzipped)
无需构建步骤
直接在HTML中使用
零依赖
响应式
数据双向绑定
自动DOM更新
条件渲染
列表渲染
组合性
15个指令
6个魔法属性
可复用组件
插件生态