HarmonyOS JS UI 框架的所有样式都可以动态设置吗？

问题描述

我正在使用 HarmonyOS JS UI 框架来开发可穿戴应用（不是 lite-wearable）。 我正在尝试更改按钮的 border-color，但它不想对不断变化的变量做出反应。我遵循了文档 here。

HML 文件

<div class="container">
    <button
        style="text-color: {{ buttonTextColor}}; border-color : {{ buttonTextColor }}"
        id="my_button"
        value="{{ buttonText }}"
        @longpress="actionFunction"
            >
    </button>
</div>

CSS 文件

#my_button {
    font-size: 50px;
    border: 10px solid white;
    background-color: gray;
    border-radius: 150px;
    width: 300px;
    height: 300px;
}

JavaScript

export default {
    data: {
        buttonText : "Press Me!",buttonTextColor: "#FFFFFF",},actionFunction() {
        this.buttonText = "I Changed"
        this.buttonTextColor = "#8B0000"
    }
}

按钮文本和文本颜色随着绑定变量的变化而变化，但 border-color 不会随之变化。我什至通过在 JavaScript 中获取 DOM 元素来设置样式，但这也没有改变边框颜色。我知道内联样式优先于类样式，因此在两者中设置样式应该没问题。

谁能看到我是否遗漏了某些东西，或者某些样式不能动态更改？

解决方法

您可以尝试通过以下方式更改边框的颜色

  <button
            style="text-color: {{ buttonTextColor}};border: 10px solid {{ buttonTextColor }}"
            id="my_button"
            value="{{ buttonText }}"
            @longpress="actionFunction"
            >
    </button>