对象语法（用于控制开关切换）

<style>
    .active {
        font-size: larger;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        color: red;
    }
</style>
<body>
    <div id="app">
        <div :class="{active: isActive}">测试class样式绑定的</div>
        <button @click="clickHandler">切换样式</button>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            isActive: true,
        },
        methods: {
            clickHandler: function () {
                this.isActive = !this.isActive;
            },
        },
    });
</script>

数组写法

<style>
    .active {
        font-size: larger;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        color: red;
    }
</style>
<body>
    <div id="app">
        <div :class="[activeClass,xxxClass]">测试class样式绑定的</div>
        <div class="active xxxClass">测试class样式绑定的</div>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            activeClass: 'active',
        }
    });
</script>

一沙一世界，一花一天堂。君掌盛无边，刹那成永恒。