Vue3 CSS v-bind 计算和三元运算

article/2025/5/12 7:49:47

官方文档 中指出:CSS 中的 v-bind 支持 JavaScript 表达式,但需要用引号包裹起来:

 例子如下:

<script lang="ts" setup>
const treeContentWidth = ref(140);
</script><style lang="less" scoped>
.tree-node-label-width-1 {width: v-bind("(treeContentWidth - 18) + 'px'");
}
</style>

treeContentWidth 变量是数字类型的,在 CSS 中引用该变量时又进行了计算,然后再拼接上“px”,因为 width 属性必须是字符串且带单位。既然是支持表达式的,那么自然可以使用三元运算符,例子如下:

.tree-node-label-width-1 {width: v-bind("((treeContentWidth - 18) < 0 ? 0 : (treeContentWidth - 18)) + 'px'");
}

当计算结果小于 0 时赋值 0


http://chatgpt.dhexx.cn/article/SDe8fFtZ.shtml

相关文章

【记】Vue - 拖拽元素组件实现

需求描述&#xff1a; 1.可实现PC/移动端元素拖拽移动 2.支持2种模式&#xff1a;1.元素跟随光标点放置2.元素在光标点平齐位置靠侧边吸附 市面上估计有很多这种组件和功能了&#xff0c;但我没找到合适的&#xff0c;用了VueUse的useDraggable Function感觉不太适合某些应用…

Vue:可拖拽组件

在实际开发中&#xff0c;很可能会遇到开发可拖拽组件的需求&#xff0c;目的是应对某些弹框组件会遮盖某些重要信息/可操作面板&#xff0c;通过可拖拽的形式可以将上层的弹框组件移动到其他位置&#xff0c;从而不影响整个系统的操作。下面&#xff0c;我们分两步走&#xff…

vue+ element 三元运算符设置按钮样式

效果图 代码块 <el-button-group><el-button size"small" click"notSelect()" :class"[status 1?isActive:]" autofocus"true" v-focus plain>待选</el-button><el-button size"small" click"…

vue三目运算符可以写html代码么,Vue-js之文本渲染、属性(样式)绑定、三元运算符、事件处理...

文本渲染之3种方式 1.{{}}&#xff1a;插值表达式 弊端&#xff1a;会出现页面闪烁问题 v-text&#xff1a;把vue实例中的内容当作纯文本&#xff0c;显示在浏览器 v-html&#xff1a;把vue实例中的内容进行渲染后&#xff0c;浏览器会再次执行文本渲染 {{msg}} let vm new Vu…

vue中的三元运算符

我们要做的效果如下&#xff1a; 如上图的全部分类效果&#xff0c;符号、的样式具体写法如下图&#xff1a;数据如下&#xff1a; 补充&#xff1a;我们一开始想的可能是在数据中直接加符号、&#xff0c;但是脑子想让我换个想法&#xff0c;所以想先控制显示&#xff0c;第一…

vue 在 html标签上 做三元运算

众所周知&#xff0c;在js 中 a<b?‘方法一’:‘方法二’ 这种 三元运算 是比较方便快捷&#xff0c;那么如何在html标签上直接使用呢&#xff1f; 在 标签包裹中&#xff0c;一半为内容&#xff0c;可以直接使用 例如&#xff1a; <p class"price">{{p…

抖音快手短视频去水印API,接口开发文档

开发者官网&#xff1a;http://api.lingquan166.com/ 简介&#xff1a;根据抖音、微视、小红书、皮皮搞笑等APP中复制出来的链接&#xff0c;解析获取短视频的标题、封面、无水印短视频地址等信息。 接口地址&#xff1a; https://api.lingquan166.com/dsp?token122917VU601…

【嵌入式开发】ARM 关闭中断 ( CPRS 中断控制位 | 中断使能寄存器 | 中断屏蔽寄存器 | 关闭中断 | 汇编代码编写 )

一. 中断控制 ( 基于 S3C6410 开发板 ) 1. 关闭中断的两个步骤 (1) 关闭中断步骤 2. CPRS 寄存器中的中断控制位 (1) CPRS 寄存器简介(2) CPRS 寄存器 中断控制 相关 位 3. 中断使能寄存器 (1) 中断使能寄存器简介(2) 中断屏蔽寄存器简介 二. 关闭中断 代码示例 1. 汇编代码编…

图像哈希算法

最近在回顾一些经典的图像哈希算法&#xff0c;本文大致介绍了一些常用的图像哈希算法&#xff0c;暂时先列一个框架&#xff0c;待日后补充。 参考链接&#xff1a; 【1】基于内容的图像哈希算法研究 【2】图像聚类-谱聚类 【3】球哈希Spherical Hashing 部分哈希源码及大牛…

消息机制(Handle机制)

消息机制简介- Handler是Android消息机制的上层接口。Handle的使用过程简单&#xff0c;通过它可以轻松将一个任务切换到Handle所在的线程中去执行。通常情况下&#xff0c;Handle的使用场景是更新UI。 在子线程中进行耗时操作&#xff0c;执行完操作后&#xff0c;发送消息&…

魔百盒九联UNT402A_S905L3_线刷固件包_语音蓝牙正常

魔百盒九联UNT402A_S905L3_线刷固件包_语音蓝牙正常 固件特点&#xff1a; 1、适用于九联UNT402A&#xff1b; 2、开放原厂固件屏蔽的市场安装和u盘安装apk&#xff1b; 3、修改dns&#xff0c;三网通用&#xff1b; 4、大量精简内置的没用的软件&#xff0c;运行速度提升…

大规模特征向量检索算法总结 (LSH PQ HNSW)

大规模特征向量检索算法总结 (LSH PQ HNSW) 转自&#xff1a;https://www.6aiq.com/article/1587522027341 向量检索基本概念 向量从表现形式上就是一个一维数组。我们需要解决的问题是使用下面的公式度量距离寻找最相似的 K 个向量。 欧式距离&#xff1a; 两点间的真实距…

面向高光谱图像的多特征融合哈希

原文&#xff1a;Efficient Multiple Feature Fusion With Hashing for Hyperspectral Imagery Classification: A Comparative Study 面向高光谱图像的多特征融合哈希 I. IntroductionII. MFH FrameworkIII. Feature HashingIV. Experiment SettingA. Data SetsB. Multiple Fe…

论文笔记-迭代量化哈希ITQ

推荐一个大牛的博客&#xff1a;http://yongyuan.name/【这篇博文也借鉴了他的博客&#xff0c;建议直接看他的博文加上论文】 自己的这个就是一个论文笔记&#xff0c;为了自己日后复习&#xff1b; 【待补充...因为笔记太乱了 懒得整理 】

ITQ(Iterative Quantization)迭代量化方法详解 hash 哈希算法

看过的文章&#xff0c;不做记录&#xff0c;即便当时理解透了&#xff0c;过一段时间后&#xff0c;知识总会模糊不清。所以从现在开始&#xff0c;对一些自己阅读过的一些精彩的文章&#xff0c;悉心记录&#xff0c;方便自己查阅温故&#xff0c;当然如果对同行有所裨益的话…

time svd java代码_ITQ算法理解 - 漫长当下TIME的个人空间 - OSCHINA - 中文开源技术交流社区...

IterativeQuantization: A Procrustean Approach to Learning Binary Codes 论文理解及代码讲解 这篇文章发表在2011年CVRP上&#xff0c;一作是Yunchao Gong&#xff0c;师从Sanjiv Kumar&#xff0c;关于Sanjiv Kumar可以到她的HomePage上了解。 文章目的&#xff1a;学习保留…

Iterative Quantization,ITQ

Abstract 针对大规模的图像检索问题&#xff0c;论文提出了一个高效的ITQ算法。该算法先将中心化后的数据映射到超立方体的顶点上&#xff0c;再通过优化过程寻找一个旋转矩阵&#xff0c;使得数据点经过旋转后&#xff0c;与超立方体的顶点数据具有最小的量化误差。ITQ算法涉及…

ITQ算法理解

开发十年&#xff0c;就只剩下这套Java开发体系了 >>> IterativeQuantization: A Procrustean Approach to Learning Binary Codes 论文理解及代码讲解 这篇文章发表在2011年CVRP上&#xff0c;一作是Yunchao Gong&#xff0c;师从Sanjiv Kumar&#xff0c;关于San…

ITQ(Iterative Quantization)图像检索算法

开发十年&#xff0c;就只剩下这套Java开发体系了 >>> 1、文章简介 名称&#xff1a;Iterative Quantization:A Procrustean Approach to Learning Binary Codes 这篇文章发表与2011年CVRP(Computer Vision & Pattern Recognition)&#xff0c;作者:Yunchao Go…

ITQ(Iterative Quantization)迭代量化方法详解

转载&#xff1a;http://www.yuanyong.org/cv/itq-hashing.html CVPR 2011《Iterative Quantization: A Procrustean Approach to Learning Binary Codes》论文阅读笔记。 看过的文章&#xff0c;不做记录&#xff0c;即便当时理解透了&#xff0c;过一段时间后&#xff0c;知识…