Vue.js 动态绑定CSS样式

第一种方法：

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
            }
        }
    }
});

效果图与上面一样