vue3中css里的v-bind
发表于|更新于
|浏览量:
一旦别人问起自己想要什么,那一刹那反倒什么都不想要了。——太宰治
官方文档:状态驱动的动态 CSS
编写一个组件:
1 | <template> |
测试:

相关推荐
2025-05-16
snabbdom
少壮不努力,老大徒悲伤。—— 汉乐府古辞《长歌行》 https://github.com/snabbdom/snabbdom/ Snabbdom:轻量、高效、模块化的虚拟 DOM 库在现代前端开发中,虚拟 DOM 技术已成为流行的界面更新方式。许多框架(如 React、Vue.js)都内置了虚拟 DOM 功能。然而,Snabbdom 提供了一种更轻量化和可扩展的虚拟 DOM 解决方案,适合希望深入控制渲染过程的开发者。 什么是 Snabbdom?Snabbdom 是一个以简洁和高效为目标的虚拟 DOM 库,其核心代码不足 200 行,但提供了丰富的功能扩展能力。开发者可以根据需要选择模块或自定义功能,打造个性化的虚拟 DOM 架构。 核心特点: 极简核心:仅 200 行核心代码,易于理解和定制。 模块化设计:通过模块扩展功能,如样式、事件监听、动画等。 高性能:Snabbdom 是目前最高效的虚拟 DOM 库之一。 灵活的 hook 系统:支持 vnode 和全局模块的生命周期钩子。 支持 JSX 和 TypeScript:方便与现代前端工具链集成。 使用场景Snabb...
2024-08-18
Apache-ShenYu支持namespace功能(二)
我曾踏足山巅,也曾进入低谷,二者都让我受益良多。——《英雄联盟》瓦洛兰之盾塔里克 上一期:Apache-ShenYu支持namespace功能 喜闻乐见,这是个连续系列,今天主要是给shenyu-dashboard的selector部分添加namespace适配 PR连接: https://github.com/apache/shenyu-dashboard/pull/471 这里有一个知识点 123456import { connect } from "dva";@connect(({ global }) => ({ currentNamespaceId: global.currentNamespaceId,}))class RuleCopy extends Component {} 装饰器语法 @connect 来连接组件与 dva 的状态管理。@connect 是一个高阶函数,通常用于将 Redux store(在 dva 中表现为 model)中的状态映射到组...
2022-06-15
konva-react
“善良一点,因为大家的一生都不容易。”——《奇迹男孩》。 官方文档:https://konvajs.org/docs/react/ 中文文档:http://konvajs-doc.bluehymn.com/docs/react/ 安装: 1pnpm install react-konva konva --save 在konva中能做到的,在konva-react也一样能做到,只不过是换了一种写法罢了 这里有个使用konva-react的在线编辑器Demo https://konvajs.org/docs/sandbox/Canvas_Editor.html 是基于一个叫Polotno的框架,它提供了多种react对konva的封装,能开箱即用 https://polotno.dev/ 但其不可以免费用于商业用途 https://codesandbox.io/embed/github/polotno-project/polotno-site/tree/source/examples/polotno-demo?fontsize=11&hidenavigation=1&a...
2025-07-29
selenium
我慢慢明白了我为什么不快乐,因为我总是期待一个结果。看一本书期待它让我变得深刻;吃饭、游泳期待它让我一斤斤瘦下来;发一条微信期待它被回复;对别人好期待被回待以好;写一个故事说一个心情期待被关注安慰;参加一个活动,期待换来充实丰富的经历。这些预设的期待如果实现了,我长舒一口气,如果没有实现呢,就自怨自艾。可是小时候也是同一个我,用一下午的时间看蚂蚁搬家,等石头开花。小时候不期待结果,小时候哭笑都不打折。——《允许自己虚度时光》 https://github.com/SeleniumHQ/selenium Selenium:让你的浏览器自动工作,解放双手的神器!你是否曾幻想过:打开电脑,一行代码敲下去,Chrome、Firefox、Safari……各路浏览器自动帮你完成所有重复操作,自己在旁边喝咖啡、刷剧、享受生活?这不是科幻,而是真实存在的“自动化世界”——Selenium,就是让这一切变得触手可及的开源王者! Selenium是什么?一句话超酷简介 Automates browsers. That’s it!Selenium,就是让浏览器自己动起来的神器!不管你用什么语言,...
2025-04-29
vue-countTo
从工作里爱了生命,就是通彻了生命最深的秘密。 —— 纪伯伦 https://github.com/PanJiaChen/vue-countTo/https://panjiachen.github.io/countTo/demo/ vue-countTo:一个简单高效的数字递增动画组件在前端开发中,数字递增动画是一种常见的交互效果,通常用于数据展示和统计页面。vue-countTo 是一个轻量级的 Vue 组件,可以快速实现目标数字递增的动画效果,让你的项目更加生动和吸引人。 什么是 vue-countTo?vue-countTo 是由 PanJiaChen 开发的一个 Vue.js 组件,用于在指定的时间内将数字从起始值递增到目标值。它简单易用,且支持高度定制化,适合各种场景的数字动画需求。 核心特点: 轻量化:组件体积小,性能优异。 易于使用:通过简单的配置即可实现数字递增动画。 高度定制:支持设置起始值、目标值、持续时间以及动画的回调函数。 Vue.js 集成:无缝嵌入 Vue 项目,兼容性强。 使用场景vue-countTo 适用于以下常见场景: 数据统计展示在...
2026-02-23
FossFLOW
眼前的瞬间是一位威力强大的女神。——歌德 FossFLOW — 用于创建华丽等轴测图的开源神器在快速变化和高度技术化的现代世界中,“以图达意”的表达变得越来越重要。FossFLOW 应运而生,为开发者、设计师和工程师带来了领先的等轴测图设计工具。 📌 FossFLOW 是什么?FossFLOW 是一个开源的渐进式 Web 应用程序(PWA),致力于帮助用户轻松创建生动的等轴测技术图解。由现代前端框架 React 打造,并使用 fork 编辑后的 Isoflow 图形库(现已作为 fossflow 发布到 NPM),无需本地安装,完全基于浏览器,无需联网即可实现离线运行。 💡 功能特性详解以下是 FossFLOW 中的一些核心功能,与其他类似工相比,它能够为用户提供极具创新性的体验: 🎨 专业级等轴测绘图:用简洁友好的方式创建 3D 风格的技术图。 💾 智能自动保存:每隔 5 秒自动保存,让您的设计过程无后顾之忧。 📱 渐进式 Web 应用支持(PWA):可在 Mac 和 Linux 上安装为原生应用。 🔒 强调用户隐私:所有数据均本地存储于用户浏览器,无需任...

阿超
我的名字叫阿超 年龄25岁 家在北京市 职业是软件开发 每天最晚也会在八点前回家 不抽烟 酒浅尝辄止 晚上十二点上床 保证睡足八个小时 睡前写一篇博客 再做二十分钟俯卧撑暖身 然后再睡觉 基本能熟睡到天亮 像婴儿一样不留下任何疲劳和压力 就这样迎来第二天的早晨 健康检查结果也显示我很正常 我想说明我是一个不论何时都追求内心平稳的人 不拘泥于胜负 不纠结于烦恼 不树立使我夜不能寐的敌人 这就是我在这社会的生活态度
Follow Me公告
This is my Blog