uni-app 更新到4.14版本后 vue3的css语法v-bind()在h5端编译失效 暂时还没测试小程序和app

uni-app 更新到4.14版本后 vue3的css语法v-bind()在h5端编译失效 暂时还没测试小程序和app

示例代码：

export default {  
   computed: {  
       thresholdHeight() {  
           return '200rpx'  
       }  
   }  
}  

<style lang="scss">  
.active-bg{  
  height: v-bind(thresholdHeight);                            
}  
</style>

操作步骤：

  • vue3的css语法v-bind()在h5端编译失效

预期结果：

  • vue3的css语法v-bind()在h5端编译失效

实际结果：

  • vue3的css语法v-bind()在h5端编译失效

bug描述：

  • vue3的css语法v-bind()在h5端编译失效

### 表格
| 项目         | 信息                   |
|--------------|------------------------|
| 产品分类     | uniapp/H5              |
| PC开发环境   | Mac                    |
| 系统版本号   | macOS14.4.1            |
| 开发工具     | HBuilderX              |
| 工具版本号   | 4.14                   |
| 浏览器       | Chrome                 |
| 浏览器版本   | 版本 124.0.6367.61（正式版本） (x86_64) |
| 项目创建方式 | HBuilderX              |

更多关于uni-app 更新到4.14版本后 vue3的css语法v-bind()在h5端编译失效 暂时还没测试小程序和app的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

HBuilderX 4.15.2024050802 已修复。

更多关于uni-app 更新到4.14版本后 vue3的css语法v-bind()在h5端编译失效 暂时还没测试小程序和app的实战教程也可以访问 https://www.itying.com/category-93-b0.html


好的呢，辛苦了～

你4.08版本正常吗

之前都是正常的

感谢反馈，css内使用v-bind设置rpx无效的问题会在4.15版本进行修复，即将发布

不是，css还能使用v-bind？

出来有一段时间了 vue3的新语法

在 uni-app 更新到 4.14 版本后，如果你发现 vue3 的 v-bind() 在 H5 端编译失效，但尚未测试小程序和 App 端，可以尝试以下步骤来排查和解决问题：

1. 检查 v-bind 的使用方式

确保你在 CSS 中使用 v-bind 的语法是正确的。例如：

<template>
  <div class="example" :style="{ '--color': color }">Hello World</div>
</template>

<script setup>
import { ref } from 'vue';

const color = ref('red');
</script>

<style scoped>
.example {
  color: v-bind(color);
}
</style>

2. 检查 uni-app 的版本兼容性

确保你使用的 uni-app 版本与 vue3 和 v-bind 语法兼容。你可以查看 uni-app 的官方文档或更新日志，确认是否有关于 v-bind 的已知问题或更新。

3. 检查编译配置

有时编译配置可能会影响 v-bind 的正常工作。检查你的 vite.config.js 或 webpack.config.js 配置，确保没有忽略或错误处理 v-bind 相关的 CSS 特性。

4. 尝试降级版本

如果问题确实是在更新到 4.14 版本后出现的，可以尝试降级到之前的版本，看看问题是否依然存在。如果降级后问题解决，可以在 GitHub 上提交 issue，向 uni-app 团队反馈这个问题。

5. 检查 H5 端的编译日志

查看 H5 端的编译日志，看是否有相关的错误或警告信息。这些信息可能会提供一些线索，帮助你定位问题。

6. 使用替代方案

如果 v-bind 在 H5 端确实无法正常工作，可以考虑使用替代方案，比如直接在 style 绑定中使用 :style 动态绑定样式，或者使用 computed 属性来动态生成样式类。

<template>
  <div :style="{ color: color }">Hello World</div>
</template>

<script setup>
import { ref } from 'vue';

const color = ref('red');
</script>
回到顶部