当前位置： 首页 > news >正文

探索Vue：数字翻滚动画的实现与优化

news 来源：原创 2025/9/18 5:51:25

在前端开发中，动画效果总能为用户界面增添一抹生动与趣味。今天，我们将深入剖析一个基于Vue 3实现的数字翻滚动画组件，从代码结构到功能实现，再到性能优化，一步步揭开它的神秘面纱。

组件概述

这个Vue组件名为NumberFlipAnimation，旨在通过数字翻滚的效果来展示一个变化的数值。无论是整数还是小数，都能以翻滚动画的形式呈现，为数据展示增添一抹动感。

代码结构
  1. html和js部分
<template><div ref="numberAnimationRef" class="count-flop" :key="compKey"><!--  --><div :class="item !== '.' ? 'count-flop-box' : 'count-flop-point'" v-for="(item, index) in value" :key="index"><div v-if="item !== '.'" class="count-flop-content" :class="['rolling_' + item]"><div v-for="(item2, index2) in numberList" :key="index2" class="count-flop-num">{{ item2 }}</div></div><div v-else class="count-flop-content">.</div></div><!--  --><div v-if="suffix" class="count-flop-unit">{{ suffix }}</div></div>
</template>
<script setup>import { ref, defineProps, onMounted, onBeforeUnmount } from 'vue';const props = defineProps({val: {type: [Number, String],default: 0,},suffix: {type: String,default: '',},});// Dataconst value = ref([]);const compKey = ref(0);=const numberList = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);const numberAnimationRef = ref(null);// Watcherconst updateValue = () => {value.value = props.val.toString().split('');compKey.value += 1;};// Intersection Observerconst observer = ref(null);onMounted(() => {observer.value = new IntersectionObserver((entries) => {entries.forEach((entry) => {if (entry.isIntersecting) {updateValue();observer.value.unobserve(entry.target);}});});if (numberAnimationRef.value) {observer.value.observe(numberAnimationRef.value);}});onBeforeUnmount(() => {if (observer.value && numberAnimationRef.value) {console.log('Unobserving element');compKey.value = 0;observer.value.unobserve(numberAnimationRef.value);}});
</script>

2. css动画部分

<style lang="stylus" scoped>.count-flop {display: inline-block;/* 可更改 */height: 4.3vw;font-size: 3.5vw;font-weight: 500;line-height: 4.3vw;color: #fff;}.count-flop > div {position: relative;display: inline-block;overflow: hidden;height: 100%;}.count-flop-box {/* 可更改 *///margin-right: 5px;width: 2vw;//border: 1px solid rgba(72, 152, 241, 0.3);/*这里的高度要比上面height的少2px*/line-height: 4.3vw;//border-radius: 6px;}.count-flop-point {/* 可更改 */margin-right: 5px;width: 10px;}.count-flop-content {text-align: center;position: absolute;left: 0;top: 0;width: 100%;animation-fill-mode: forwards !important;}.rolling_0 {animation: rolling_0 0.7s ease;}@keyframes rolling_0 {from {transform: translateY(-90%);}to {transform: translateY(0);}}.rolling_1 {animation: rolling_1 0.7s ease;}@keyframes rolling_1 {from {transform: translateY(0);}to {transform: translateY(-10%);}}.rolling_2 {animation: rolling_2 0.9s ease;}@keyframes rolling_2 {from {transform: translateY(0);}to {transform: translateY(-20%);}}.rolling_3 {animation: rolling_3 1s ease;}@keyframes rolling_3 {from {transform: translateY(0);}to {transform: translateY(-30%);}}.rolling_4 {animation: rolling_4 1.2s ease;}@keyframes rolling_4 {from {transform: translateY(0);}to {transform: translateY(-40%);}}.rolling_5 {animation: rolling_5 1s ease;}@keyframes rolling_5 {from {transform: translateY(0);}to {transform: translateY(-50%);}}.rolling_6 {animation: rolling_6 1.5s ease;}@keyframes rolling_6 {from {transform: translateY(0);}to {transform: translateY(-60%);}}.rolling_7 {animation: rolling_7 2.1s ease;}@keyframes rolling_7 {from {transform: translateY(0);}to {transform: translateY(-70%);}}.rolling_8 {animation: rolling_8 0.8s ease;}@keyframes rolling_8 {from {transform: translateY(0);}to {transform: translateY(-80%);}}.rolling_9 {animation: rolling_9 1.6s ease;}@keyframes rolling_9 {from {transform: translateY(0);}to {transform: translateY(-90%);}}/* 其他 rolling_X 动画略 */
</style>
代码结构解析

  1. ‌模板部分‌ (<template>):

    • 组件的HTML结构由外层的<div>容器包裹，内部通过v-for指令遍历value数组，为每个数字或小数点创建一个独立的<div>。
    • 使用:key属性确保列表渲染的高效性。
    • 通过动态类名rolling_加上数字值，为每个数字应用特定的翻滚动画。
    • 若存在后缀（如单位），则在数字后显示。

  2. ‌脚本部分‌ (<script setup>):

    • 使用Vue 3的setup语法，定义组件的props、ref和响应式数据。
    • props包括val（要展示的数字或字符串）、numberList（数字列表，用于翻滚动画）和suffix（后缀，如单位）。
    • updateValue函数用于将传入的val转换为字符串数组，并更新compKey以触发重新渲染。
    • 利用IntersectionObserver实现懒加载动画，当组件进入视口时才执行动画，提高性能。
    • 在组件卸载时，通过onBeforeUnmount钩子清除观察器，避免内存泄漏。

  3. ‌样式部分‌ (<style lang="stylus" scoped>):

    • 使用Stylus预处理器编写组件的样式，确保样式的作用域仅限于当前组件。
    • 定义了.count-flop及其子元素的样式，包括大小、布局和动画效果。
功能实现细节
  • ‌数字翻滚动画‌：通过动态类名和CSS动画实现。每个数字都有一套对应的翻滚动画，当value更新时，通过更改类名触发动画。
  • ‌懒加载优化‌：利用IntersectionObserver监听组件是否进入视口，只有在用户即将看到组件时才触发动画，减少不必要的计算和渲染。
  • ‌响应式更新‌：通过ref和watch机制，确保当props变化时，组件能够响应并更新显示。

相关文章：

探索Vue：数字翻滚动画的实现与优化

在前端开发中&#xff0c;动画效果总能为用户界面增添一抹生动与趣味。今天&#xff0c;我们将深入剖析一个基于Vue 3实现的数字翻滚动画组件&#xff0c;从代码结构到功能实现&#xff0c;再到性能优化&#xff0c;一步步揭开它的神秘面纱。 组件概述 这个Vue组件名为Number…...

编程日记 2025/9/18 5:51:25

POI pptx转图片

前言 ppt页面预览一直是个问题&#xff0c;office本身虽然有预览功能但是收费&#xff0c;一些开源的项目的预览又不太好用&#xff0c;例如开源的&#xff1a;kkfileview pptx转图片 1. 引入pom依赖 我这个项目比较老&#xff0c;使用版本较旧 <dependency><gro…...

编程日记 2025/9/13 13:28:49

力扣LeetCode: 2506 统计相似字符串对的数目

题目&#xff1a; 给你一个下标从 0 开始的字符串数组 words 。 如果两个字符串由相同的字符组成&#xff0c;则认为这两个字符串 相似 。 例如&#xff0c;"abca" 和 "cba" 相似&#xff0c;因为它们都由字符 a、b、c 组成。然而&#xff0c;"aba…...

编程日记 2025/9/17 12:27:19

DeepSeek模型量化

技术背景 大语言模型&#xff08;Large Language Model&#xff0c;LLM&#xff09;&#xff0c;可以通过量化&#xff08;Quantization&#xff09;操作来节约内存/显存的使用&#xff0c;并且降低了通讯开销&#xff0c;进而达到加速模型推理的效果。常见的就是把Float16的浮…...

编程日记 2025/9/14 21:12:01

如何调整CAN位宽容忍度？

CAN位宽容忍度是指在控制器局域网络&#xff08;CAN, Controller Area Network&#xff09;中允许时钟同步的误差范围。这是CAN网络正常通信时的关键因素之一&#xff0c;因为CAN协议依赖位同步来确保多个节点在总线上正确解码数据。CAN位宽容忍度确保节点之间由于时钟偏差或抖…...

编程日记 2025/9/13 13:28:43

Versal - 基础6（Linux 开发 AIE-ML + 自动化脚本解析）

目录 1. 简介 2. 步骤解析 2.1 概览 2.1.1 步骤依赖关系 2.1.2 总目录结构 2.2 Vitis XPFM 2.2.1 Dir 2.2.2 Makefile 2.2.3 vitis_pfm.py 2.3 Kernels 2.3.1 Dir 2.3.2 Makefile 2.3.3 config 文件 2.4 AIE_app 2.4.1 Dir 2.4.2 Makefile 2.4.3 aie 要点 2.…...

编程日记 2025/9/13 13:28:41

乐享数科：供应链金融—三个不同阶段的融资模式

供应链金融是与产业链紧密结合的融资模式&#xff0c;它主要体现在订单采购、存货保管、销售回款这三个不同的业务阶段&#xff0c;并针对这些阶段提供了相应的金融服务。以下是这三个阶段中主要的融资模式及其特点&#xff1a; 供应链金融融资模式主要分为以下几种&#xff1…...

编程日记 2025/9/14 21:04:45

vmware虚拟机Ubuntu Desktop系统怎么和我的电脑相互复制文件、内容

1、先安装vmware workstation 17 player&#xff0c;然后再安装Ubuntu Desktop虚拟机&#xff0c;然后再安装vmware tools&#xff0c;具体可以参考如下视频&#xff1a; VMware虚拟机与主机实现文件共享&#xff0c;其实一点也不难_哔哩哔哩_bilibili 2、本人亲自试过了&…...

编程日记 2025/9/13 13:28:37

【React】React 基础（2）

JSX 是什么 JSX是一种 JavaScript 的语法扩展(extension), 也在很多地方称之为 JavaScript XML, 因为看起就是一段XML语法。它用于描述我们的Ul界面&#xff0c;并且其完成可以和 JavaScript 融合在一起使用&#xff1b; 为什么 React 选择使用 jsx&#xff1f; React 认为渲…...

编程日记 2025/9/13 13:28:35

DeepSeek接入Siri（已升级支持苹果手表）完整版硅基流动DeepSeek-R1部署

DeepSeek接入Siri&#xff08;已升级支持苹果手表&#xff09;完整版硅基流动DeepSeek-R1部署 **DeepSeek** 是一款专注于深度学习和人工智能的工具或平台&#xff0c;通常与人工智能、机器学习、自动化分析等领域有关。它的主要功能可能包括&#xff1a;深度学习模型搜索&…...

编程日记 2025/9/13 13:28:33

ASP.NET MVC AJAX 文件上传

如何使用 MVC 5 和 AJAX&#xff08;.NET Framework&#xff09;上传文件。 使用AJAX和ASP.NET MVC 上传文件 再简单不过了。对于最纯粹的人来说&#xff0c;这不需要使用jQuery。此代码实际上允许上传多个文件。 注意&#xff1a;以下代码示例支持 ASP.NET MVC 5。如果使用 .…...

编程日记 2025/9/14 16:31:29

npm使用了代理，但是代理软件已经关闭导致创建失败

如果在关闭前打开了vscode&#xff0c;此时vscode中的终端没有刷新&#xff0c;就会出现这个问题&#xff0c;最开始会一直转圈圈&#xff0c;直到超时&#xff0c;然后出现该报错 ❯ npm create vuelatest npm error code ECONNREFUSED npm error syscall connect npm error …...

编程日记 2025/9/13 13:28:29

Spring Boot定时任务原理

Spring Boot定时任务原理 在现代应用中&#xff0c;定时任务的调度是实现周期性操作的关键机制。Spring Boot 提供了强大的定时任务支持&#xff0c;通过注解驱动的方式&#xff0c;开发者可以轻松地为方法添加定时任务功能。本文将深入探讨 Spring Boot 中定时任务的实现原理…...

编程日记 2025/9/13 17:01:40

公文派2025：免费社区版重大安装更新！

大家好&#xff0c;感谢对「公文派」的支持。 距离上一次更新已经过去了将近一年的时间&#xff0c;今天我们带来了全新的免费2025社区版&#xff0c;该版本也是目前最新的版本&#xff0c;无需授权即可使用所有的功能。 我们先来看下本版本的更新及特色功能 聚合多个AI功能…...

编程日记 2025/9/14 7:06:53

Ubuntu24.04LTS的下载安装超细图文教程（VMware虚拟机及正常安装）

&#x1f638;个人主页&#x1f449;&#xff1a;神兽汤姆猫 &#x1f4d6;系列专栏&#xff1a;开发语言环境配置 、 Java学习 、Java面试 、Markdown等 学习上的每一次进步&#xff0c;均来自于平时的努力与坚持。 &#x1f495;如果此篇文章对您有帮助的话&#xff0c;请点…...

编程日记 2025/9/17 22:49:22

ES6相关操作

一.JavaScript的基础语法 1.Demo1.html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>JavaScrip…...

编程日记 2025/9/13 13:28:24

【运维】源码编译安装cmake

背景&#xff1a; 已经在本地源码编译安装gcc/g&#xff0c;现在源码安装cmake 下载源码 下载地址&#xff1a;CMake - Upgrade Your Software Build System 安装步骤&#xff1a; ./bootstrap --prefix/usr/local/cmake make make install 错误处理 1、提示找不到libmpc.…...

编程日记 2025/9/15 9:43:24

代码随想录_回溯

代码随想录_回溯 回溯 77.组合 77. 组合 给定两个整数 n 和 k&#xff0c;返回范围 [1, n] 中所有可能的 k 个数的组合。 你可以按 任何顺序 返回答案。 思路: 回溯 优化: 剪枝 注意代码中i&#xff0c;就是for循环里选择的起始位置。 for (int i startIndex; i <…...

编程日记 2025/9/13 13:28:20

tauri2实现监听记住窗口大小变化，重启回复之前的窗口大小

要想实现记住窗口大小的功能&#xff0c;整体逻辑就是要监听窗口大小变化&#xff0c;将窗口大小保存下来&#xff0c;重启之后&#xff0c;读取保存的大小&#xff0c;然后恢复。这里可以使用rust层实现&#xff0c;也可以在前端实现。我这里就纯rust层实现了。 监听窗口变化…...

编程日记 2025/9/13 13:28:18

番茄工作法html实现

对比了deepseek-r1-online和本地部署的14b的版本&#xff0c;输出的输出的html页面。 在线满血版的功能比较强大&#xff0c;可以一次完成所有要求。14b版本的功能有一些欠缺&#xff0c;但是基本功能也是写了出来了。 input write a html named Pomodoro-clock which “hel…...

编程日记 2025/9/16 7:18:15

C++：dfs，bfs各两则

1.木棒 167. 木棒 - AcWing题库 乔治拿来一组等长的木棒&#xff0c;将它们随机地砍断&#xff0c;使得每一节木棍的长度都不超过 5050 个长度单位。 然后他又想把这些木棍恢复到为裁截前的状态&#xff0c;但忘记了初始时有多少木棒以及木棒的初始长度。 请你设计一个程序…...

编程日记 2025/9/13 13:28:14

【ORB-SLAM3】鲁棒核函数的阈值设置

问题背景 阈值 δ \delta δ 是 Huber 鲁棒核函数的重要参数。首先给出结论&#xff0c;在ORB-SLAM系列中&#xff0c;该阈值选取的原则为&#xff1a; 单目情况下&#xff0c;根据95%置信水平下两自由度卡方检验的临界值&#xff0c; δ \delta δ 设置为 5.991 \sqrt{5.9…...

编程日记 2025/9/16 9:09:55

四种常见图形库GLUT，SDL，SFML和GLFW简介

GLUT、SDL、SFML 和 GLFW 是四种常用的库&#xff0c;用于管理窗口、输入和上下文创建&#xff0c;通常与 OpenGL 结合使用以实现图形渲染。以下是它们的详细介绍、常用应用场合和具体案例。 1. GLUT&#xff08;OpenGL Utility Toolkit&#xff09; 简介 GLUT 是一个用于创建…...

编程日记 2025/9/13 9:01:01

C++类和对象进阶：初始化列表和static成员深度详解

C类和对象&#xff1a;初始化列表和static成员深度详解 1. 前言2. 构造函数初始化成员变量的方式2.1 构造函数体内赋值2.2 初始化列表2.2.1 初始化列表的注意事项 2.3 初始化列表的初始化顺序 3. 类的静态成员3.1 引入3.2 静态成员变量3.3 静态成员函数3.4 静态成员的注意事项3…...

编程日记 2025/9/12 19:23:40

[C#]C# winform部署yolov12目标检测的onnx模型

yolov12官方框架&#xff1a;github.com/sunsmarterjie/yolov12 【测试环境】 vs2019 netframework4.7.2 opencvsharp4.8.0 onnxruntime1.16.3 【效果展示】 【调用代码】 using System; using System.Collections.Generic; using System.ComponentModel; using System.…...

编程日记 2025/9/15 14:52:53

阿里云k8s服务部署操作一指禅

文章目录 DockerFile镜像操作阿里云k8s服务部署 DockerFile # 使用 JDK 17 官方镜像 # linux架构&#xff1a;FROM --platformlinux/amd64 openjdk:17-jdk-slim # arm架构&#xff1a;openjdk:17-jdk-slim FROM --platformlinux/amd64 openjdk:17-jdk-slim# 设置工作目录 WORK…...

编程日记 2025/9/16 8:12:28

Transformer LLaMA

一、Transformer Transformer&#xff1a;一种基于自注意力机制的神经网络结构&#xff0c;通过并行计算和多层特征抽取&#xff0c;有效解决了长序列依赖问题&#xff0c;实现了在自然语言处理等领域的突破。 Transformer 架构摆脱了RNNs&#xff0c;完全依靠 Attention的优…...

编程日记 2025/9/17 17:18:38

球队训练信息管理系统设计与实现(代码+数据库+LW)

摘 要 传统办法管理信息首先需要花费的时间比较多&#xff0c;其次数据出错率比较高&#xff0c;而且对错误的数据进行更改也比较困难&#xff0c;最后&#xff0c;检索数据费事费力。因此&#xff0c;在计算机上安装球队训练信息管理系统软件来发挥其高效地信息处理的作用&a…...

编程日记 2025/9/13 17:01:28

【存储中间件API】MySQL、Redis、MongoDB、ES常见api操作及性能比较

常见中间件api操作及性能比较 ☝️ MySQL crud操作✌️ maven依赖✌️ 配置✌️ 定义实体类✌️ 常用api ☝️ Redis crud操作✌️ maven依赖✌️ 配置✌️ 常用api ☝️ MongoDB crud操作✌️ maven依赖✌️ 配置文件✌️ 定义实体类✌️ MongoDB常用api ☝️ ES crud操作 ⭐️…...

编程日记 2025/9/13 17:01:25

UE_C++ —— Gameplay Classes

目录 一&#xff0c;Adding Classes 二&#xff0c;Class Headers Class Declaration Class Specifiers Metadata Specifiers 三&#xff0c;Class Implementation Class Constructor 引擎中每个游戏类都由一个类头文件&#xff08;.h&#xff09;和一个类源文件&#x…...

编程日记 2025/9/13 17:01:23

windows上vscode cmake工程搭建

安装vscode插件&#xff1a; 1.按装fastc&#xff08;主要是安装MinGW\mingw64比较方便&#xff09; 2.安装C&#xff0c;cmake&#xff0c;cmake tools插件 3.准备工作完成之后&#xff0c;按F1&#xff0c;选择cmake:Quick Start就可以创建一个cmake工程。 4.设置Cmake: G…...

编程日记 2025/9/14 13:36:13

软件测试：1、单元测试

1. 单元测试的基本概念 单元&#xff08;Unit&#xff09;&#xff1a;软件系统的基本组成单位&#xff0c;可以是函数、模块、方法或类。 单元测试&#xff08;Unit Testing&#xff09;&#xff1a;对软件单元进行的测试&#xff0c;验证代码的正确性、规范性、安全性和性能…...

编程日记 2025/9/17 14:23:19

如果后台的Long类型的数据返回是null，那么Android客户端的数据bean的kotlin的Long类型的字段接受到数据后是null空指针吗？

如果后台的Long类型的数据返回是null&#xff0c;那么Android客户端的数据bean的kotlin的Long类型的字段接受到数据后是null空指针吗&#xff1f; DeepSeek R1 思考 35 秒 思考过程 好的&#xff0c;用户的问题是关于在Android客户端使用Kotlin处理后台返回的Long类型数据为n…...

编程日记 2025/9/15 5:04:46

Vue3 打造 Windows 桌面个性高效组件工具

软件介绍 Widgets 这款基于 Vue3 构建的开源 Windows 桌面小部件工具超实用。 其多样化组件库涵盖超 20 种&#xff0c;从倒计时、打工进度等实用工具&#xff0c;到抖音热榜等实时资讯组件应有尽有&#xff0c;各组件独立运行&#xff0c;满足多场景需求。 高度自定义布局支持…...

编程日记 2025/9/13 17:01:16

学习笔记-沁恒第四讲-米醋

一&#xff0c; 语音模块&#xff1a;数据包发送 刷卡模块&#xff1a;数据包接收 AS608&#xff1a;数据包发送接收 二&#xff0c;第三讲文件夹改成第四讲&#xff0c;工程也改成第四讲 三&#xff0c;目前在内存里面。保存新值&#xff0c;掉电会丢失 u8 password[6]{1,…...

编程日记 2025/9/14 22:03:33

epoll_event的概念和使用案例

epoll_event 是 Linux 下 epoll I/O 多路复用机制的核心数据结构&#xff0c;用于描述文件描述符&#xff08;File Descriptor, FD&#xff09;上发生的事件及其关联的用户数据。通过 epoll&#xff0c;可以高效地监控多个文件描述符的状态变化&#xff08;如可读、可写、错误等…...

编程日记 2025/9/13 17:01:12

容器和虚拟机选择对比

1. 概述 如果主要需求是学习和测试 Ubuntu 下的命令行工具或服务型应用&#xff0c;推荐使用 Docker Docker 更轻量、更高效&#xff0c;适合快速搭建和销毁环境。 启用 WSL 2&#xff0c;Docker Desktop 是一个非常好的选择。 如果需要完整的桌面环境或进行复杂的系统级开…...

编程日记 2025/9/16 5:10:14

C++17中std::chrono::duration和std::chrono::time_point的舍入函数

文章目录 1. std::chrono::duration的舍入函数1.1 floor1.2 ceil1.3 round 2. std::chrono::time_point的舍入函数2.1 示例 3. 舍入函数的应用场景3.1 时间测量3.2 数据记录3.3 时间同步 4. 总结 在C17中&#xff0c; std::chrono库提供了一组强大的时间处理工具&#xff0c;包…...

编程日记 2025/9/13 17:01:08

基于SpringBoot的线上汽车租赁系统的设计与实现(源码+SQL脚本+LW+部署讲解等)

专注于大学生项目实战开发,讲解,毕业答疑辅导&#xff0c;欢迎高校老师/同行前辈交流合作✌。 技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;…...

编程日记 2025/9/13 17:01:06

基于Dancing Links的精确覆盖算法（解决NP难问题）和量子计算机模拟中的Shor算法（涉及数论与量子叠加态模拟）

一、Dancing Links算法实现数独求解（NP难问题） 算法方案 数独可转化为精确覆盖问题，使用Knuth提出的DLX算法实现高效求解。该算法通过双向十字循环链表实现快速回溯，时间复杂度可达O(n^k)（k为常数） #include <iostream> #include <vector> #include <c…...

编程日记 2025/9/13 17:01:03

体育品牌排行榜前十名：MLB·棒球1号位

MLB是一个融合了棒球文化与街头时尚元素的潮流运动品牌。以下是对该品牌的详细介绍&#xff1a; 一、品牌背景 • 全称&#xff1a;MLB全称是Major League Baseball&#xff0c;即美国职业棒球大联盟。不过&#xff0c;作为品牌的MLB并非由美国职业棒球大联盟直接运营&#x…...

编程日记 2025/9/13 19:45:11

Java网络编程封装

系列文章目录 Java知识点 文章目录 系列文章目录&#x1f449;前言&#x1f449;一、封装的目标&#x1f449;二、套接字层封装&#x1f449;壁纸分享&#x1f449;总结 &#x1f449;前言 Java 网络编程封装原理主要围绕着将底层的网络通信细节隐藏起来&#xff0c;提供简洁…...

编程日记 2025/9/17 23:45:58

数字内容体验标杆案例解析

内容概要 在数字化转型浪潮中&#xff0c;数字内容体验正成为企业构建核心竞争力的关键抓手。本文通过拆解金融、零售、文旅等领域的标杆案例&#xff0c;系统分析沉浸式设计与智能交互系统的技术融合路径&#xff0c;揭示头部企业如何通过XR技术、实时数据可视化及场景化内容…...

编程日记 2025/9/15 7:26:42

区块链相关方法-PEST分析

一、定义:一种用于分析企业外部宏观环境的工具。PEST 这四个字母分别代表政治&#xff08;Political&#xff09;、经济&#xff08;Economic&#xff09;、社会&#xff08;Social&#xff09;和技术&#xff08;Technological&#xff09;。这种分析方法帮助企业或组织了解宏…...

编程日记 2025/9/13 17:00:57

Dify安装教程：Linux系统本地化安装部署Dify详细教程

1. 本地部署 Dify 应用开发平台 环境：Ubuntu（24.10） docker-ce docker compose 安装 克隆 Dify 源代码至本地环境： git clone https://github.com/langgenius/dify.git 启动 Dify： cd dify/docker cp .env.example...

编程日记 2025/9/15 21:07:46

git使用-克隆远程项目、分支管理

文章目录 克隆远程项目到本地1. 远程找到需要克隆的项目&#xff0c;复制ssh地址2. idea开启git版本控制&#xff08;如果已经开了&#xff0c;忽略此步骤&#xff09;3. clone远端项目4. 克隆完成 分支管理1. 新建分支2. 切换分支3. 合并分支4. 储存变化 克隆远程项目到本地 …...

编程日记 2025/9/13 17:00:54

QT 引入Quazip和Zlib源码工程到项目中，无需编译成库，跨平台，压缩进度

前言 最近在做项目时遇到一个需求&#xff0c;需要将升级的文件压缩成zip&#xff0c;再进行传输&#xff1b; 通过网络调研&#xff0c;有许多方式可以实现&#xff0c;例如QT私有模块的ZipReader、QZipWriter&#xff1b;或者第三方库zlib或者libzip或者quazip等&#xff1…...

编程日记 2025/9/15 12:38:34

SQLMesh 系列教程8- 详解 seed 模型

在数据分析和建模过程中&#xff0c;外部模型&#xff08;External Models&#xff09;在 SQLMesh 中扮演着重要角色。外部模型允许用户引用外部数据源或现有数据库表&#xff0c;从而实现灵活的数据整合和分析。本文将介绍外部模型的定义、生成方法&#xff08;包括使用 CLI 和…...

编程日记 2025/9/15 17:47:11

oracle apex post接口

日常记录 使用到了apex_json方式接收 、、、1 首先&#xff0c;接口通过body传递过来&#xff0c;成功接收到&#xff0c; 数据格式为 JSON_OBJECT_T l_json : JSON_OBJECT_T.parse(:body); 这里我用参数接收到 然后 里面是包含了 "data" 我用 继续接收到这个 l…...

编程日记 2025/9/13 17:00:49

复制所绑定元素文本的vue自定义指令

最近写了一个复制所绑定元素文本的vue自定义指令&#xff0c;给大家分享一下。 import { ElMessage } from element-plus// data-* 属性名 const dataCopyBtnTextAttribute data-copy-btn-text // 复制按钮的class&#xff0c;结合项目实际进行设置 const copyBtnClass icon…...

编程日记 2025/9/15 23:02:15