Nativescript Vue - 将字符串绑定到标签样式属性不起作用答案

【问题标题】：Nativescript Vue - binding a string to Label style attribute does not workNativescript Vue - 将字符串绑定到标签样式属性不起作用
【发布时间】：2021-09-29 09:02:45
【问题描述】：

我刚刚创建了一个空白的 Nativescript Vue 项目 (Typescript) 并尝试将字符串绑定到 Label 的 type 属性 - 不起作用（样式被完全忽略）。我也试过 Nativescript Playground，结果一样。

示例代码是：

<template>
    <Page>
        <ActionBar title="Example" />
        <StackLayout>
            <Label style="font-size: 34" text="WORKS" />
            <Label :style="myStyle" text="DOES NOT WORK" />
        </StackLayout>
    </Page>
</template>

<script>
    export default {
        data() {
            return {
                myStyle: "font-size: 34"
            };
        }
    };
</script>
<style scoped>
</style>

您可以在 Nativescript Vue Playground 中重现。在我的 Mac 上，我使用 Nativescript 8.1.2 和 nativescript-vue 2.9.0。

我希望应该可以做这样的事情。任何帮助表示赞赏，谢谢。

【问题讨论】：

标签： vue.js styles nativescript bind

【解决方案1】：

为了将计算样式与绑定机制一起使用，您需要一个 styleObject，其中包含作为键的规则名称、值以及...以及值。

<template>
    <Page>
        <ActionBar title="Example" />
        <StackLayout>
            <Label style="font-size: 34" text="WORKS" />
            <Label :style="myStyle" text="DOES NOT WORK" />
        </StackLayout>
    </Page>
</template>

<script>
    export default {
        data() {
            return {
                myStyle: {
                  font-size: '34px'
                },
            };
        }
    };
</script>
<style scoped>
</style>

【讨论】：

成功了，非常感谢！

【解决方案2】：

你能检查一下这种方式是否 100% 有效。对象语法通常与返回对象的计算属性结合使用。

<template>
    <Page>
        <ActionBar title="Example" />
        <ScrollView>
            <StackLayout>
                <Label style="font-size: 34" text="WORKS" />
        <Label :style="styleObject" text="DOES NOT WORK" />
            </StackLayout>
        </ScrollView>
    </Page>
</template>
<script>
    export default {
        data() {
            return {
                styleObject:{
              font-size: '34px'
            },
            };
        }
    };
</script>

【讨论】：