Vue JS 为组件切换类的方法

Question

我已经尝试了几种方法来做到这一点，但似乎没有用。 Returns activeClass 未定义。并且在 Vue 中使用普通 JS 的 classList 也 returns 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

使用数组而不是对象来 return 你的值：

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

你可以像这样让你的代码更干净：

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

Answer 2

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

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

关于你的 js：

data: { isActive: true, hasError: false }

FYI you can use just :class (without the v-bind) and it will be perfect aswell.

如果 isActive 属性 returns true[，该代码会将 'active' class 添加到 div

Source: Docs and personal usage ( https://vuejs.org/guide/class-and-style.html#Object-Syntax )

Vue JS 为组件切换类的方法

Vue JS way to toggle classes for Component

javascript

vue.js

Vue JS 为组件切换 类 的方法

Vue JS way to toggle classes for Component

javascript

vue.js

Vue JS 为组件切换类的方法