VueJS中元素类绑定失效问题及挂载相关疑问

核心问题 #

你在:class指令中直接绑定了方法名getClass，但Vue不会自动调用这个方法——它只会把方法的引用传递给class绑定，而不是执行方法获取返回值。而插值表达式{{ getClass }}会自动执行函数并返回结果，所以能正常工作。

解决方案 #

方案1：直接调用方法 #

将:class="getClass"修改为:class="getClass()"，明确调用方法获取返回的类名：

<div id="test" :class="getClass()">
    <h1>Test stuff</h1>
    <h2>{{ testvalue }}</h2>
</div>

方案2：改用计算属性（推荐） #

计算属性是响应式的，会自动求值，且具备缓存机制，比方法更适合这种场景：

createApp({
    data() {
        return {
            testvalue: true,
        };
    },
    computed: {
        getClass() {
            console.log("Computed 'getClass' called");
            return this.testvalue ? "testcolor" : "";
        },
    },
}).mount("#test");

此时绑定无需调用，直接写:class="getClass"即可。

关于挂载元素的差异 #

当你把:class绑定到子元素时看似生效，大概率是你误写成了调用形式（getClass()）；而挂载到根元素时直接用方法名，Vue的根节点属性绑定逻辑不会自动执行函数，因此失效。统一使用上述两种方案即可解决所有场景的问题。

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