首页 前端知识 Vue3 CSS v-bind 计算和三元运算

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

2024-02-01 12:02:29 前端知识 前端哥 396 308 我要收藏

官方文档 中指出: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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/974.html
标签
vue3
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!