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

vue中scss使用js的变量

news 来源：原创 2025/8/12 13:48:24

一、前言

在项目开发中，很多时候会涉及到scss样式变量，正常定义方式 $primary-color: rgb(188, 0, 194);；使用时直接使用即可：color: $primary-color。但是，如果，这些变量是在js中定义的怎么办

二、实现

动态绑定：:style=“{‘–str-length’: strLength}”
scss 中使用 v-bind(strLength) => strLength 是js变量

<template><div class="typing-demo-wrapper" :style="{'--str-length': strLength}"><div class="typing-demo">{{ text }}</div></div>
</template><script lang="ts" setup>
const text = ref("你好；欢迎来到自定义布局页面。");
const strLength = text.value.length; // 计算字符串长度;
</script><style lang="scss" scoped>
.typing-demo-wrapper {height: 200px;  // 父元素的元素可按实际情况处理overflow: auto;/* 实现从左到右打字效果 */@keyframes typing {from {width: 0}}/* 实现鼠标闪烁效果 */@keyframes blink {50% {border-color: transparent}} .typing-demo {font-family: monospace; /* 使用等宽字体，保证每个字的宽度一致 */      // width: 30ch; /* 设置宽度为字符串长度 */// 根据字符串长度设置宽度width: calc(var(--str-length) * 2ch); // 使用动态绑定的css变量，计算宽度// width: calc(v-bind(strLength) * 2ch); // 直接使用v-bind绑定js变量/* typing 3s 表示3秒内打完这15个字  blink  .5s表示0.5秒闪烁一下光标*/animation: typing 3s steps(v-bind(strLength)), blink .5s step-end infinite alternate;white-space: nowrap;overflow: hidden;/* 鼠标光标用右边的边框代替 */border-right: 2px solid red;font-size: 2em; }}
</style>

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！

vue中scss使用js的变量

一、前言在项目开发中，很多时候会涉及到scss样式变量，正常定义方式 $primary-color: rgb(188, 0, 194);；使用时直接使用即可：color: $primary-color。但是，如果，这些变量是在js中定义的怎么办二、实现 …...

编程日记 2025/8/12 13:48:24

QtGUI模块功能详细说明，字体和文本渲染（四）

目录一. 窗口和屏幕管理二. 绘图和渲染三. 图像处理四. 字体和文本 1、核心概念 1.1、字体 (Font) 1.2、字形 (Glyph) 1.3、字符 (Character) 1.4、文本布局 (Text Layout) 1.5、文本渲染 (Text Rendering) 1.6、度量 (Metrics) 2、字体管理 2.1、QFont&#…...

编程日记 2025/8/7 20:35:11

计算机学习路线与编程语言选择（信息差）

——授人以鱼不如授人以渔面向岗位学习！到招聘网站看看有哪些岗位，看一看岗位职责、要求牛客网（计算机实习工作最好的网站） boss直聘确定岗位后（如前端、后端），岗位需要什么语言&#xf…...

编程日记 2025/8/12 13:46:19

多环串级PID

文章目录为什么要多环程序主函数内环外环双环PID调参内环Kp调法Ki调法外环Kp 以一定速度到达指定位置封装为什么要多环单环只能单一控制速度或者位置，如果想要同时控制多个量如速度，位置，角度，就需要多个PID 速度环一般PI…...

编程日记 2025/8/7 20:35:07

编写大模型Prompt提示词方法

明确目标和任务 // 调用LLM进行分析const prompt 你是一名严格而友好的英语口语评分官，专业背景包括语音学（phonetics）、二语习得（SLA）和自动语音识别（ASR）。你的任务是： ① 比对参…...

编程日记 2025/8/11 21:16:51

使用chrome浏览器截长图

如何使用chrome浏览器截长图： 使用chrome截取完整网页图片第一步、按F12，开发者模式的布局按下图布局第二步、按ctrlshiftp组合键，搜索“截图” ，然后自动截图保存在下载目录（右上角）了。...

编程日记 2025/8/7 20:35:02

【MySQL】第二弹——MySQL表的增删改查(CURD))

文章目录 🎓一. CRUD🎓二. 新增(Create)🎓三. 查询(Rertieve)📖1. 全列查询📖2. 指定列查询📖3. 查询带有表达式📖4. 起别名查询(as )📖 5. 去重查询(distinct)📖6. 排序…...

编程日记 2025/8/7 20:34:59

Android NDK版本迭代与FFmpeg交叉编译完全指南

在Android开发中，使用NDK(Native Development Kit)进行原生代码开发是一项常见需求，特别是当我们需要集成FFmpeg这样的多媒体处理库时。本文将深入分析Android NDK的版本迭代分界线，详细讲解FFmpeg交叉编译的注意事项，并提供完整的…...

编程日记 2025/8/12 1:28:43

【Linux网络】Socket-UDP相关函数

socket() 函数这个函数的作用是创建一个 Socket 文件描述符，在客户端和服务器都可以使用。 #include <sys/socket.h> int socket(int domain, int type, int protocol);参数： domain：指定协议族，例如 AF_INET 代表 IPv4 …...

编程日记 2025/8/9 10:28:58

最优化方法Python计算：有约束优化应用——线性Lasso回归预测器

实际应用中，特征维度 n n n通常远大于样本容量 m m m（ n ≪ m n\ll m n≪m），这种高维小样本场景下特征数据可能含有对标签数据 y i y_i yi的取值不必要的成分，甚至是噪声。此时，我们希望回归模型中的优化…...

编程日记 2025/8/9 12:20:45

基础算法 —— 二分算法【复习总结】

1. 简介 1.1 原理二分算法，顾名思义，关键在于二分，当我们求解的目标具有二段性时，我们就可以使用二分算法： 先根据待查找区间中点位置，判断结果会在左侧还是右侧，接下来，舍弃一半…...

编程日记 2025/8/10 22:41:20

计算机网络常识：缓存、长短连接网络初探、URL、客户端与服务端、域名操作 tcp 三次握手四次挥手

缓存： 缓存是对cpu，内存的一个节约：节约的是网络带宽资源节约服务器的性能资源的每次下载和请求都会造成服务器的一个压力减少网络对资源拉取的延迟这个就是浏览器缓存的一个好处表示这个html页面的返回是不要缓存的忽略缓存需要每次…...

编程日记 2025/8/7 8:33:33

OpenHarmony平台驱动开发（九），MIPI DSI

OpenHarmony平台驱动开发（九） MIPI DSI 概述功能简介 DSI（Display Serial Interface）是由移动行业处理器接口联盟（Mobile Industry Processor Interface (MIPI) Alliance）制定的规范，旨在降…...

编程日记 2025/8/7 20:34:44

经济体制1

一．计划经济体制与市场经济体制 1.计划经济又称指令型经济，是对生产和资源分配以及产品消费事先进行计划的经济体制。市场经济体制是指依靠市场手段对资源进行配置的经济体制注意： 计划与市场都是调节经济的手段，都属于资源配…...

编程日记 2025/8/7 20:34:42

Spring AI 入门（持续更新）

介绍 Spring AI 是 Spring 项目中一个面向 AI 应用的模块，旨在通过集成开源框架、提供标准化的工具和便捷的开发体验，加速 AI 应用程序的构建和部署。依赖  <dependency><groupId>org.spr…...

编程日记 2025/8/7 20:34:40

[ctfshow web入门] web58

信息收集 if(isset($_POST[c])){$c $_POST[c];eval($c); }else{highlight_file(__FILE__); }这麽简单？ 解题好吧，还是我想得太简单了把system禁用了。不是参数过滤，而是直接禁用，不管是间接还是直接调用system都不行&#x…...

编程日记 2025/8/7 20:34:37

Python量化交易Backtrader技术指标的实现

一、Backtrader技术指标概览（一）Backtrader内置指标的优势 Backtrader内置的技术指标具有以下优势：多样性：涵盖了常见的移动平均线、相对强弱指数（RSI）、布林带等多种指标，满足了不同交易者的需求。易用性：通过简单的函数调用即可在策略中添加和使用这些指标，无需…...

编程日记 2025/8/7 20:34:35

蓝桥杯第十六届c组c++题目及个人理解

本篇文章只是部分题目的理解，代码和思路仅供参考，切勿当成正确答案，欢迎各位小伙伴在评论区与博主交流！ 题目：2025 题目解析核心提取要求的数中至少有1个0、2个2、1个5 代码展示 #include<iostream> #incl…...

编程日记 2025/8/12 7:36:02

ARM 芯片上移植 Ubuntu 操作系统详细步骤

一、准备工作 （一）硬件准备 ARM 开发板：确保 ARM 开发板的型号与 Ubuntu 官方支持的 ARM 架构兼容，常见的 ARM 架构有 ARMv7、ARMv8 等。例如树莓派系列开发板，广泛用于 ARM 系统移植，其采用 ARM 架构。存…...

编程日记 2025/8/7 20:34:31

能耗优化新引擎：EIOT平台助力企业降本增效

安科瑞顾强数字化转型的背景下，能源管理正加速向智能化、远程化方向演进。安科瑞电气推出的EIOT托管平台及ADW300系列4G无线计量仪表，通过云端技术与无线通信的深度融合，为用户打造了高效、便捷的远程能源监测与管理体系，助力企…...

编程日记 2025/8/11 6:30:15

录播课视觉包装与转化率提升指南

1. 封面设计黄金法则 1.1 程序员审美三要素极客风配色方案主色：深空灰(#2D2D2D) 代码蓝(#007BFF) 点缀色：终端绿(#28A745) 警告黄(#FFC107) 信息密度控制核心标语≤9字（如："3天攻克分布式事务"） 技…...

编程日记 2025/8/7 20:34:28

Solidity语言基础：区块链智能合约开发入门指南

一、Solidity概述 Solidity是以太坊生态系统中最重要的智能合约编程语言，由Gavin Wood于2014年提出。作为面向合约的高级语言，它结合了JavaScript、Python和C的语法特点，专为在以太坊虚拟机（EVM）上运行而设计。核心…...

编程日记 2025/8/7 20:34:26

QMK开发环境搭建指南：Eclipse和VS Code详解

QMK开发环境搭建指南：Eclipse和VS Code详解前言各位键盘DIY爱好者们，今天跟大家分享如何搭建QMK固件开发环境。无论你是想定制自己的客制化键盘固件，还是对开源键盘固件开发感兴趣，这篇教程都能帮你搞定开发环境配置。本文将详…...

编程日记 2025/8/12 6:28:15

Python pandas 向excel追加数据，不覆盖之前的数据

最近突然看了一下pandas向excel追加数据的方法，发现有很多人出了一些馊主意； 比如用concat,append等方法，这种方法的会先将旧数据df_1读取到内存，再把新数据df_2与旧的合并，形成df_new,再覆盖写入，消耗和速…...

编程日记 2025/8/7 20:34:22

spring中RequestContextHolder

1、在 Spring 框架中， RequestAttributes attributes RequestContextHolder.getRequestAttributes(); 是获取当前请求上下文的核心方法。以下是其关键要点及注意事项： ‌一、核心机制‌ ‌作用原理‌ 通过 ThreadLocal 存储当前线程的请求属性对象 …...

编程日记 2025/8/7 20:34:20

Kotlin 遍历

在 Kotlin 中，遍历（迭代）是操作集合、数组、范围（Range）等数据结构的常见需求。Kotlin 提供了多种遍历方式，语法简洁且功能强大。以下是不同场景下的遍历方法总结，附代码示例： 一、…...

编程日记 2025/8/7 20:34:18

Ubuntu Linux系统配置账号无密码sudo

在Linux系统中，配置无密码sudo可以通过修改sudoers文件来实现。以下是具体的配置步骤一、编辑sudoers文件输入sudo visudo命令来编辑sudo的配置文件。visudo是一个专门用于编辑sudoers文件的命令，它会在保存前检查语法错误，从而防止可能的…...

编程日记 2025/8/7 20:34:16

C# NX二次开发：判断两个体是否干涉和获取系统日志的UFUN函数

大家好，今天要讲关于如何判断两个体是否干涉和获取系统日志的UFUN函数。 （1）UF_MODL_check_interference：这个函数的定义为根据单个目标体检查每个指定的工具体是否有干扰。 Defined in: uf_modl.h Overview Checks each sp…...

编程日记 2025/8/12 7:52:40

若依项目图片显示问题

图片显示异常问题路径配置问题：前端图片路径配置错误，最初使用相对路径且未从根目录开始解析，导致浏览器根据当前页面 URL 解析路径出错。例如在用户信息展示页面，若当前页面 URL 为http://localhost:8088/user/profile&#xff…...

编程日记 2025/8/7 20:34:12

线索二叉树

一概念线索二叉树（Threaded Binary Tree）是一种对二叉树的优化结构，主要解决传统二叉树遍历时需要借助栈或递归（额外空间开销）的问题。通过利用节点中的空指针（nullptr）存储遍历过程中的前驱…...

编程日记 2025/8/7 20:34:10

Git查看某个commit的改动

在Git中查看特定commit的改动有多种方法，下面是几种常用的命令行方式： 1. 使用 git show 命令这是最常用的方法，直接显示某个commit的详细信息和改动： git show <commit-hash> 例如： git show abc1234 也可…...

编程日记 2025/8/7 17:28:54

es 里的Filesystem Cache 理解

文章目录背景问题1，Filesystem Cache 里放的是啥问题2，哪些查询它们会受益于文件系统缓存问题3 查询分析背景对于es 优化来说常常看到会有一条结论给，给 JVM Heap 最多不超过物理内存的 50%，且不要超过 31GB（避免…...

编程日记 2025/8/9 9:47:34

2025年3月电子学会等级考试五级题——4、收费站在哪里

文章目录题目代码公式小结题目 4、收费站在哪里在一条高速公路上，如果已知 n 座收费站的位置 x1,x2,… ,xn（不妨假设 0x1 ≤ x2 ≤ … ≤ xn），就很容易算出一共有 n(n-1)/2 个距离的值。而比较困难的问题是，在收集…...

编程日记 2025/8/7 18:57:44

深入探索 JavaScript 中的模块对象

引言在现代 JavaScript 开发中，模块化编程是一项至关重要的技术。它允许开发者将代码拆分成多个独立的模块，每个模块专注于单一功能，从而提高代码的可维护性、可测试性和复用性。而模块对象则是模块化编程中的核心概念之一，它为…...

编程日记 2025/8/10 20:36:11

R1-Searcher：用强化学习解锁大语言模型检索新能力！

R1-Searcher：用强化学习解锁大语言模型检索新能力！ 大语言模型（LLMs）发展迅猛，却常因依赖内部知识而在复杂问题上“栽跟头”。今天解读的论文提出R1-Searcher框架，通过强化学习提升LLMs检索能力。它表现超…...

编程日记 2025/8/9 7:32:37

LangChain框架-PromptTemplate 详解

摘要本文聚焦于 LangChain 框架中PromptTemplate提示词模板模块的深度解析，主要参考langchain_core.prompts源码模块与官方文档。系统梳理 LangChain 对提示词模板的封装逻辑与设计思路，旨在帮助读者构建全面、深入的知识体系，为高效运用LangChain 框架的提示词模板开发应用…...

编程日记 2025/8/9 11:24:50

【Java ee 初阶】文件IO和操作（下）

书接上文文本操作的方法 String[] list() 返回 File 对象代表的目录下的所有文件名 File[] listFiles() 返回 File 对象代表的目录下的所有文件，以 File 对象表示此处是针对File对象打印得到的效果（调用了File的toString） boolean …...

编程日记 2025/8/8 22:15:23

Android7 Input（六）InputChannel

概述: 本文讲述Android Input输入框架中 InputChannel的功能。从前面的讲述，我们知道input系统服务最终将输入事件写入了InputChannel，而input属于system_server进程，App属于另外一个进程，当Input系统服务想要把事件传递给App进行…...

编程日记 2025/8/7 20:34:01

【Java ee初阶】初始网络

一、IP地址概念 IP地址主要用于标识网络主机、其他网络设备（如路由器）的网络地址。简单说，IP地址用于定位主机的网络地址。就像我们发送快递一样，需要知道对方的收货地址，快递员才能将包裹送到目的地。格式 IP…...

编程日记 2025/8/10 9:35:12

LabVIEW 2019 与 NI VISA 20.0 安装及报错处理

在使用 Windows 11 操作系统的电脑上，同时安装了 LabVIEW 2019 32 位和 64 位版本的软件。此前安装的 NI VISA 2024 Q1 版，该版本与 LabVIEW 2019 32 位和 64 位不兼容，之后重新安装了 NI VISA 20.0。从说明书来看，NI VISA 20.0 …...

编程日记 2025/8/7 20:33:58

http协议理解

文章目录 http协议理解基本概念HTTP版本演变版本编年史版本对比未来趋势 HTTP请求/响应结构请求报文响应报文HTTP方法分类对比方法选择原则必须遵守的约束常见状态码HTTP头部字段HTTPSHTTPS 核心功能说明HTTPS 如何工作？ HTTP特点补充知识点启用HTTP/2Nginx 中配置…...

编程日记 2025/8/7 20:33:56

typecho中的Widget设计文档

组成系统的最基本元素什么是Widget Widget是组成Typecho的最基本元素，除了已经抽象出来的类库外，其它几乎所有的功能都会通过Widget来完成。在实践中我们发现，在博客这种小型但很灵活的系统中实施一些大型框架的思想是不合适的&#xff0c…...

编程日记 2025/8/11 17:27:31

使用ESPHome烧录固件到ESP32-C3并接入HomeAssistant

文章目录一、安装ESPHome二、配置ESP32-C3控制灯1.主配置文件esp32c3-luat.yaml2.基础通用配置base.yaml3.密码文件secret.yaml4.围栏灯four_light.yaml5.彩灯rgb_light.yaml6.左右柱灯left_right_light.yaml 三、安装固件四、HomeAssistant配置ESPHome1.直接访问2.配置ESPHom…...

编程日记 2025/8/8 21:32:12

基于STM32、HAL库的CH340N USB转UART收发器驱动程序设计

一、简介： CH340N是南京沁恒电子生产的一款USB转串口芯片，具有以下特点：支持USB 2.0全速（12Mbps）内置时钟，无需外部晶振支持5V和3.3V电源电压提供常用的MODEM联络信号内置上电复位电路支持Windows/Linux/Mac OSX等多平台驱动体积小，SOP-8封装二、硬件接口： CH…...

编程日记 2025/8/9 9:54:48

Spring Boot Controller 如何处理HTTP请求体

Spring Boot (通过Spring MVC) 提供了强大的机制来处理不同 Content-Type 的HTTP请求体。这主要依赖于 HttpMessageConverter 接口的各种实现，它们能够自动将请求体内容转换成Java方法参数。一、核心机制：HttpMessageConverter Spring MVC会根据…...

编程日记 2025/8/11 22:20:50

【deepseek教学应用】001：deepseek如何撰写教案并自动实现word排版

本文讲述利用deepseek如何撰写教案并自动实现word高效完美排版。文章目录一、访问deepseek官网二、输入教案关键词三、格式转换四、word进一步排版一、访问deepseek官网官网：https://www.deepseek.com/ 进入主页后，点击【开始对话】，如…...

编程日记 2025/8/7 22:07:52

【Spring Boot 多模块项目】@MapperScan失效、MapperScannerConfigurer 报错终极解决方案

在使用 Spring Boot 构建多模块项目，集成 MyBatis-Plus 时，很多开发者会遇到类似如下启动报错： Error creating bean with name mapperScannerConfigurer ... Caused by: java.lang.IllegalArgumentException: Property basePackage is requ…...

编程日记 2025/8/7 22:07:50

vue 中如何使用region？

vue 中如何使用region？ 在 Vue 文件中，你可以使用 //#region 和 //#endregion 注释来创建可折叠的代码区块（类似于 C# 的 region）。这可以显著提高大型 Vue 组件的可读性。 1. 基本用法在 <script> 部分使用 <script&…...

编程日记 2025/8/11 6:44:06

Spring Boot 启动原理的核心机制

一、核心启动流程概览 Spring Boot 的启动流程可概括为 7 个关键阶段： 1. 加载启动类 (Main Class) 2. 初始化 SpringApplication 实例 3. 加载配置 & 准备环境 (Environment) 4. 创建 ApplicationContext（容器） 5. 刷新容器&#…...

编程日记 2025/8/11 3:54:16

【每天学习一点点】使用Python的pathlib模块分割文件路径

使用Python的pathlib模块分割文件路径 pathlib模块（Python 3.4）提供了面向对象的文件系统路径操作方式，比传统的os.path更加直观和易用。以下是使用pathlib分割文件路径的几种方法： 基本路径分割 from pathlib import Path# 创…...

编程日记 2025/8/9 13:17:13

一、前言

二、实现

相关文章：