NativeScript Vue：将字符串绑定到Label组件的style属性失效问题

我完全懂你碰到的这个坑——静态写style属性没问题，但用响应式绑定字符串到:style就完全没效果，连Playground里都复现了，确实挺让人困惑的。

问题出在NativeScript Vue的:style绑定规则和Web Vue不一样：它不接受CSS字符串格式，而是要求传入样式对象（键为驼峰式的样式属性名，值为对应的值）。这是因为NativeScript直接操作原生控件的样式属性，不是像Web那样解析CSS文本。

修复后的代码示例 #

把你的myStyle改成对象格式，绑定就能正常生效了：

<template> 
  <Page> 
    <ActionBar title="Example" /> 
    <StackLayout> 
      <Label style="font-size: 34" text="WORKS" /> 
      <!-- 现在用对象格式绑定style -->
      <Label :style="myStyle" text="NOW WORKS!" /> 
    </StackLayout> 
  </Page> 
</template> 

<script> 
export default { 
  data() { 
    return { 
      // 换成驼峰式的样式对象，对应CSS的font-size
      myStyle: { fontSize: 34 } 
    }; 
  } 
}; 
</script> 

<style scoped> 
</style>

多样式的情况 #

如果需要绑定多个样式，同样用对象的方式，比如：

myStyle: {
  fontSize: 34,
  color: '#ff0000',
  fontWeight: 'bold',
  padding: 10
}

这里的属性名都是驼峰式（比如fontWeight对应CSS的font-weight），和Web Vue的对象式style绑定规则一致，但NativeScript不支持字符串格式的style绑定。

为什么静态style字符串能生效？ #

静态的style="font-size: 34"能正常工作，是因为NativeScript在编译模板时会自动把这个CSS字符串解析成对应的原生样式属性，但动态绑定的:style不会做这个解析，直接要求传入原生能识别的样式对象。

内容的提问来源于stack exchange，提问作者Oliver