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

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

Vue3 CSS v-bind 计算和三元运算_第1张图片

 例子如下:




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

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

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

你可能感兴趣的:(Web,css,前端,Vue3)