第一種方法：

v-bind:class="{a:b,c:b}"     a c 代表CSS樣式表裡相應的樣式名       b 代表true(啟用此樣式)/false(不啟用此樣式)

html

    <!--vue-app是根容器-->
    <div id="vue-app">
        <input type="button" v-on:click="a=!a" v-bind:class="{changeColor:a,changeWidth:a}" value="change!">
    </div>

  css

.changeColor{
    background: brown;
    color: #ffffff;
}
.changeWidth{
    width: 200px;
}
 

   js

//例項化vue物件
new Vue({
    el:"#vue-app",
    data:{
        a:false
    },
    methods:{},
    computed:{}
});

效果圖

點選按鈕後

再次點選按鈕後將恢復到初始樣子

第二種方法

html

    <!--vue-app是根容器-->
    <div id="vue-app">
        <input type="button" v-on:click="a=!a" v-bind:class="change" value="change">
    </div>
 

css檔案與上面一樣
 

JS

//例項化vue物件
new Vue({
    el:"#vue-app",
    data:{
        a:false
    },
    methods:{},
    computed:{
        change:function(){
            return {
                changeColor:this.a,
                changeWidth:this.a
            }
        }
    }
});

效果圖與上面一樣