<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active{
            color:red;
        }
    </style>
</head>
<body>

    <div id="app">
        <h2 :class="{active:isActive,inLine:isLine}">当前计数</h2>
        <button v-on:click="updateClass">更换颜色</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>

        const app=new Vue({
            el:"#app",
            data:{
                isActive:true,
                isLine:true
            },
            methods:{
                updateClass:function(){
                    this.isActive=!this.isActive;
                }
            }
        });

    </script>

</body>
</html>

点击按钮效果图：

v-bind绑定class对象_vue.js
多次点击后，通过修改isActive属性值为true或者false，来控制字体显示红色或者黑色。