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

news2024/11/27 22:29:33

官方文档 中指出: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://www.coloradmin.cn/o/742140.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

mschart Label Formart显示数值的格式化

默认这个数值想显示2位小数&#xff0c; 格式化代码如下。 series1.Label "#VAL{###.###}";

字符指针?指针数组?数组指针?《C语言指针进阶第一重奏》

目录 一.字符指针 1.1字符指针的认识 1.2字符指针存放字符串 1.3字符指针的使用 二.指针数组 2.1指针数组的认识 三.数组指针 3.1数组指针的认识 3.2数组名和&数组名的区别 3.3数组指针的使用 3.4数组参数&#xff0c;指针参数 3.5一维数组传参 3.6二维数组传…

如何让Stable Diffusion正确画手(1)-通过embedding模型优化图片质量

都说AI画手画不好手&#xff0c; 看这些是我用stable diffusion生成的图片&#xff0c;小姐姐都很漂亮&#xff0c;但手都千奇百怪&#xff0c;破坏了图片的美感。 其实只需要一个提示词&#xff0c;就能生成正确的手部&#xff0c;看这是我重新生成的效果&#xff0c;每一个小…

【leetcode】面试题 02.01. 移除重复节点 (python + 链表)

题目链接&#xff1a;[leetcode] 面试题 02.01. 移除重复节点 # Definition for singly-linked list. # class ListNode(object): # def __init__(self, x): # self.val x # self.next Noneclass Solution(object):def removeDuplicateNodes(self, he…

MySQL为什么采用B+树作为索引底层数据结构?

索引就像一本书的目录&#xff0c;通过索引可以快速找到我们想要找的内容。那么什么样的数据结构可以用来实现索引呢&#xff1f;我们可能会想到&#xff1a;二叉查找树&#xff0c;平衡搜索树&#xff0c;或者是B树等等一系列的数据结构&#xff0c;那么为什么MySQL最终选择了…

尚硅谷Docker实战教程-笔记12【高级篇,Docker-compose容器编排】

尚硅谷大数据技术-教程-学习路线-笔记汇总表【课程资料下载】视频地址&#xff1a;尚硅谷Docker实战教程&#xff08;docker教程天花板&#xff09;_哔哩哔哩_bilibili 尚硅谷Docker实战教程-笔记01【基础篇&#xff0c;Docker理念简介、官网介绍、平台入门图解、平台架构图解】…

一篇文章搞懂Libevent网络库的原理与应用

1. Libevent介绍 Libevent 是一个用C语言编写的、轻量级的开源高性能事件通知库&#xff0c;主要有以下几个亮点&#xff1a; > - 事件驱动&#xff08; event-driven&#xff09;&#xff0c;高性能; > - 轻量级&#xff0c;专注于网络&#xff1b; > - 源代码相当…

前端(五)——从 Vue.js 到 UniApp:开启一次全新的跨平台开发之旅

&#x1f642;博主&#xff1a;小猫娃来啦 &#x1f642;文章核心&#xff1a;从 Vue.js 到 UniApp&#xff1a;开启一次全新的跨平台开发之旅 文章目录 UniApp和vue.js什么是UniApp&#xff1f;UniApp的写法什么是vue.js&#xff1f;UniApp与vue.js是什么关系&#xff1f; 为什…

Python+Appium+Pytest自动化测试-参数化设置

来自APP Android端自动化测试初学者的笔记&#xff0c;写的不对的地方大家多多指教哦。&#xff08;所有内容均以微博V10.11.2版本作为例子&#xff09; 在自动化测试用例执行过程中&#xff0c;经常出现执行相同的用例&#xff0c;但传入不同的参数&#xff0c;导致我们需要重…

【Redis基础】快速入门

一、初识Redis 1. 认识NoSQL 2. 认识Redis Redis诞生于2009年&#xff0c;全称是Remote Dictionary Server&#xff08;远程词典服务器&#xff09;&#xff0c;是一个基于内存的键值型NoSQL数据库特征 &#xff08;1&#xff09;键值&#xff08;key-value&#xff09;型&am…

测试员如何突破自我的瓶颈?我有几点看法

前阵子我自己也对如何“突破瓶颈”思考过&#xff0c;我觉得“突破瓶颈”、“弥补短板”等等都大同小异&#xff0c;从古至今就是测试员们津津乐道的话题。我也对自己该如何“突破瓶颈”总结了几点&#xff0c;跟大家分享下&#xff1a; 1、“常立志、立长志”。“立志”就是目…

Vue脚手架使用【快速入门】

一、使用vue脚手架创建工程 在黑窗口中输入vue ui命令 再更改完路径地址后需要按回车 二、vue工程中安装elementui 第一种可以在黑窗口输入命令安装 npm install -s element-ui第二种使用图形化安装 三、 在vue工程中安装axios 第一种可以在黑窗口输入命令安装 npm inst…

ECMAScript6之一

目录 一、介绍 二、新特性 2.1 let 和 const 命令 2.2 es6的模板字符串 2.3 增强的函数 2.4 扩展的字符串、对象、数组功能 2.5 解构赋值 2.6 Symbol 2.7 Map 和 Set 2.8 迭代器和生成器 2.9 Promise对象 2.10 Proxy对象 2.11 async的用法 2.22 类class 2.23 模块…

linux内核中kmalloc与vmalloc

kmalloc 和 vmalloc 是 Linux 内核中的两种内存分配方法&#xff0c;它们都用于为内核分配内存&#xff0c;但它们在使用和管理内存方面存在一些重要差异。下面我们详细讨论这两种内存分配方法的异同。 相同点&#xff1a; 都是内核空间的内存分配方法。都可以用于动态分配内…

anaconda目录下的pkgs文件夹很大,可以删除吗?

pkgs这个目录占用了6GB的硬盘空间。 其实里面是conda安装第三方包的时候保存在本地的下载文件&#xff0c;大部分是可以删除的。 只是删除后&#xff0c;后续你需要创建虚拟环境的时候或者在虚拟环境下pip安装第三方库的时候&#xff0c;会从网络去下载&#xff0c;没法直接从…

Jmeter的常用设置(一)

文章目录 前言一、Jmeter设置中文 方法一&#xff08;临时改为中文&#xff09;方法二&#xff08;永久改成中文&#xff09;二、启动Jmeter的两种方式 方法一&#xff08;直接启动&#xff0c;不打开cmd窗口&#xff09;方法二&#xff08;带有cmd窗口的启动&#xff09;三、调…

【xxl-job】本地部署并接入xxl-job到项目中

本地部署并接入xxl-job到项目中 一、xxl-job简介 XXL-JOB是一个分布式任务调度平台&#xff0c;其核心设计目标是开发迅速、学习简单、轻量级、易扩展。现已开放源代码并接入多家公司线上产品线&#xff0c;开箱即用。 什么是分布式任务调度 通常任务调度的程序是集成在应用…

SparkCoreDAG

DAG有向无环图 倒推 故推导程序的执行计划时&#xff0c;先看代码有几个action算子&#xff0c;从action倒推 一个action会产生一个JOB&#xff08;DAG&#xff09;&#xff08;即一个应用程序内的子任务&#xff09; 一个action一个Job一个DAG 一个application里面可以有多…

Latex:画图识别符号

http://detexify.kirelabs.org/classify.html

RDMA RoCev2 CM建链和Socket建链测试

前言 RDMA在高性能计算&#xff0c;AI大模型训练中发挥着重要的作用。 主流支持RDMA的协议有IB、RoCev1、RoCev2、iWARP。 其中RoCev2是应用最广泛的协议&#xff0c;因为其RDMA over UDP/IP&#xff0c;不依赖昂贵的IB网络设备&#xff0c;同时支持路由&#xff0c;性能上也…