uni-app nvue中style赋值问题

在 uni-app 的 nvue 中，style 的赋值方式与普通的 vue 项目有所不同。nvue 是 uni-app 提供的一种原生渲染模式，它使用 weex 的原生渲染引擎，因此在样式处理和布局上有一些特殊的规则。

1. 内联样式

在 nvue 中，你可以直接在标签上使用 style 属性来设置内联样式，但需要注意以下几点：

• nvue 中的样式属性名需要使用驼峰命名法，例如 backgroundColor 而不是 background-color。
• 样式值需要使用字符串形式。

<template>
  <view :style="{ backgroundColor: 'red', fontSize: '14px' }">
    这是一个视图
  </view>
</template>

2. 动态绑定样式

你可以通过 :style 动态绑定样式对象或数组。样式对象中的属性名需要使用驼峰命名法。

<template>
  <view :style="styleObject">
    这是一个视图
  </view>
</template>

<script>
export default {
  data() {
    return {
      styleObject: {
        backgroundColor: 'blue',
        fontSize: '16px'
      }
    };
  }
};
</script>

3. 使用 class 绑定样式

你也可以通过 class 来绑定样式，但需要注意 nvue 中的 class 样式需要使用 weex 的样式规则。

<template>
  <view class="my-view">
    这是一个视图
  </view>
</template>

<style>
.my-view {
  background-color: green;
  font-size: 18px;
}
</style>

4. 样式继承

在 nvue 中，样式继承与 weex 的规则一致，子元素不会继承父元素的样式。因此，如果你希望子元素继承父元素的样式，需要显式地在子元素上设置样式。

5. 样式单位

在 nvue 中，样式单位默认是 px，但你可以使用 weex 提供的 wx 单位来进行适配。

<template>
  <view :style="{ width: '750wx', height: '100px' }">
    这是一个视图
  </view>
</template>