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

Question

我刚刚创建了一个空白的 Nativescript Vue 项目 (Typescript) 并尝试将字符串绑定到 Label 的类型属性 - 不起作用（样式被完全忽略）。我也在 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.

我希望可以做这样的事情。感谢任何帮助，谢谢。

Answer 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>

Answer 2

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

<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>

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

Nativescript Vue - binding a string to Label style attribute does not work

styles

bind

vue.js

nativescript