Class与Style绑定

1.绑定HTML Class



var app = new Vue({
    el: "#app",
    data: {
        isActive: true,
        error: true,
        activeClass: "active",
        errorClass: "error"
    },
    computed: {
        classObject: function () {
            return {
                active: this.isActive,
                error: this.error
            }
        }
    }
});

2.绑定内联样式



var app = new Vue({
    el: "#app",
    data:{
        baseStyle: {color: "red", fontSize: "16px"},
        overridStyle: {color: "blue", fontSize: "18px"}
    },
    computed: {
        styleObject: function () {
            return {
                color: "red",
                fontSize: "16px"
            };
        }
    }
});

v-bind:style会自动为某些CSS属性添加特定前缀,2.30+可以为style绑定中属性提供一个数组(多重值)如:

你可能感兴趣的:(Class与Style绑定)