Question

使用VueJs，可以做这样的事情吗？

HTML：

<div class="someStaticClass {{someDynamicClass}}">...</div>

JS：

var app = new Vue({
    data: {
        someDynamicClass: 'myClassName'
    },
    mounted: function() {
        this.someDynamicClass = 'myOtherClassName';
    }
});

我从VueJs documentation知道我可以使用JS对象进行绑定，但是，我希望使用内联变量更简单地编写它。谢谢！

Answer 1

如果这就是您的意思，您可以这样做吗？

<div class="someStaticClass" :class="{dynamicClassHere: ifConditionIsTrue}">...</div>

您可以使用计算属性根据其他逻辑将类名字符串还给您，然后在if条件下始终返回true。

<div class="someStaticClass" :class="{computedProperty: true}">...</div>

使用VueJs绑定内联动态CSS类名称

1 个答案: