关于组件状态驱动的动态 CSS 值

来源：4-19 全新 vue 能力：组件状态驱动的动态 CSS 值

面包烤不熟

2021-11-06

老师，你好，组件状态驱动的动态 CSS 值这里好像无作用，试了一下el-image，在css里使用
::v-deep .el-image {
height: v-bind(logoHeight) + ‘px’;
}
并无效果。

而您的代码里：
.logo-container {
height: v-bind(logoHeight) + ‘px’;
}
这个代码好像实际也未起作用，头像44是因为刚好el-avatar的属性size，而不是动态驱动的css。

不知道我描述清楚没有，也不知道是不是我哪里的理解出现了错误。

写回答

2回答

sunzhenyang

2022-11-15

写法问题，

v-bind(logoHeight) 实际转化成的是 css var() 函数，

px 应该在变量里，不应该拼接在后面

// 正确写法

const logoHeight = '100px';

height: v-bind(logoHeight);

// 错误写法

const logoHeight = 100;

height: v-bind(logoHeight) + 'px';

至于变量怎么定义通用就是另一个问题了，

例如可以用计算属性等方式得到表示高度并且带单位的字符串

let logoHeight = ref(44)

let logoHeightCssVal = computed(() => logoHeight.value + 'px')

height: v-bind(logoHeightCssVal);

Sunday

2021-11-06

你好
如果你不确定是否有作用的话，那么你可以尝试绑定一个color试试。
const testcoloe = ref('red')
然后绑定到css试试

基于Vue3新标准，打造后台综合解决方案

基于Vue3重写Vue-element-admin,打造后台前端综合解决方案

1940 学习 · 1686 问题

相似问题

回答 1

回答 1

回答 2

回答 1

回答 1