uni-app vue3模式下app.vue中v-bind-in-css效果不生效

uni-app vue3模式下app.vue中v-bind-in-css效果不生效

示例代码：

<script setup lang="ts">
import { onHide, onLaunch, onShow } from '@dcloudio/uni-app';
import { ref } from 'vue';

onLaunch(() => {
console.log('App Launch');
});
onShow(() => {
// console.log('App Show');
});
onHide(() => {
// console.log('App Hide');
});
const com = ref({
height: '100rpx'
});
</script>   

root {
    --body-height: calc(100vh - var(--window-top) - var(--window-bottom));
--height: v-bind(com.height);
}

操作步骤：

直接运行H5查看全局样式:root即可

预期结果：

–height: v-bind(com.height); 可以解析为100rpx对应的值

实际结果：

–height: v-bind(com.height); 中数据解析为undefind

bug描述：

语法参考与vue3官网：https://cn.vuejs.org/api/sfc-css-features#v-bind-in-css 但是css无法读取ref变量中的数值 具体效果

bug描述

bug描述：

bug描述


更多关于uni-app vue3模式下app.vue中v-bind-in-css效果不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app vue3模式下app.vue中v-bind-in-css效果不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中，使用Vue 3模式时，你可能会遇到在app.vue中使用v-bind:style（简写为:style）绑定CSS样式不生效的问题。这通常是由于Vue的响应式系统和uni-app的渲染机制之间的某些交互导致的。为了确保样式能够正确绑定和更新，你可以采用以下几种方法，并通过代码示例来说明。

方法一：直接使用对象语法绑定样式

这是最常见的方式，通过对象语法将样式直接绑定到组件上。确保你的样式对象符合CSS属性命名规范。

<template>
  <view :style="appStyle">
    <!-- 其他内容 -->
  </view>
</template>

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

const appStyle = ref({
  color: 'red',
  backgroundColor: 'white',
  fontSize: '16px'
});

// 示例：在组件挂载后修改样式
onMounted(() => {
  setTimeout(() => {
    appStyle.value = {
      color: 'blue',
      backgroundColor: 'lightgray',
      fontSize: '18px'
    };
  }, 2000);
});
</script>

方法二：使用数组语法结合多个样式对象

当你需要动态地应用多个样式对象时，可以使用数组语法。

<template>
  <view :style="[baseStyle, dynamicStyle]">
    <!-- 其他内容 -->
  </view>
</template>

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

const baseStyle = {
  color: 'black',
  padding: '10px'
};

const dynamicStyle = ref({
  backgroundColor: 'yellow',
  border: '1px solid black'
});

// 动态修改样式
dynamicStyle.value = {
  backgroundColor: 'green',
  border: '2px dashed red'
};
</script>

方法三：确保样式属性名正确

在使用v-bind:style时，确保你使用的CSS属性名是正确的，比如backgroundColor而不是background-color。Vue的样式绑定不支持CSS的kebab-case命名，必须使用camelCase。

注意事项

  • 确保你的uni-app和Vue 3相关的依赖已经更新到最新版本，以避免已知的bug。
  • 如果你的样式依然不生效，检查是否有其他CSS规则覆盖了绑定的样式。
  • 使用开发者工具检查元素，查看最终应用的样式，确认绑定的样式是否被正确应用。

通过上述方法，你应该能够在uni-app的Vue 3模式下正确地使用v-bind:style来动态绑定CSS样式。

回到顶部