Question

我尝试了几种方法来做到这一点，但似乎没有用。返回activeClass未定义。使用plain JS的classList也会在Vue中返回undefined。似乎无法在提供的文档中指出这一点。

这是我作为锅炉板所得到的。

let attributes = {
    activeClass: 'tab--active'
}

    Vue.component('insurance-menu', {
        template: `
            <ul id="tabs">
                <li><a class="tab" v-bind:class="{activeClass}" href="#">Link</a></li>
                <li><a class="tab" v-bind:class="{activeClass}" href="#">Link</a></li>
                <li><a class="tab" v-bind:class="{activeClass}" href="#">Link</a></li>
                <li><a class="tab" v-bind:class="{activeClass}" href="#">Link</a></li>
            </ul>`,
        data: function() {
            return attributes

        },
        methods: {

        }
    });

    let tabs = new Vue({
        el: '#menu-container'
    });

Answer 1

使用数组而不是Object来返回您的值：

<a class="tab" v-bind:class="[activeClass]">

你可以让你的代码更加干净：

<a :class="['tab', activeClass]">

Answer 2

您可以使用本地数据在视图中添加某个类，如下所示：

<div v-bind:class="{ active: isActive }"></div>

在你的js：

data: { isActive: true, hasError: false }

你可以使用
FYI 只是：类（没有v-bind），它也将是完美的。

该代码会添加“活跃”字样。如果isActive属性返回true

，则为div的类

来源：文档和个人用法（https://vuejs.org/guide/class-and-style.html#Object-Syntax）

Vue JS切换Component的类方法

2 个答案: