绑定class

v-bind:class不但可以设置class属性，还可以和元素本身的class共存

<div id="app" class="static" v-bind:class="{active:isActive,bold:isBold}">
    {{message}}
</div>
<script>
    const dataObj = {
        message: 'hello,vue',
        isActive: true,
        isBold: true,
    };
    const app = new Vue({
            el: '#app',
            data: dataObj,
            computed: {},
            method: {}
        })
    ;
</script>

上面的方案给模板插值带来一定的压力，我们可以直接定义在视图模型端

<div id="app" class="static" v-bind:class="isClass">
    {{message}}
</div>
const dataObj = {
        message: 'hello,vue',
        isClass:{
            active:true,
            bold:true,
        }
    };

模板插值使用数组格式来定义

<div id="app" class="static" v-bind:class="[active,bold]">
    {{message}}
</div>
const dataObj = {
        message: 'hello,vue',
        active:'active',
        bold:'bold',
    };

有复杂的业务计算时，可以交给计算属性处理

<div id="app" class="static" v-bind:class="classObject">
    {{message}}
</div>
const dataObj = {
    message: 'hello,vue',
};
const app = new Vue({
    el: '#app',
    data: dataObj,
    computed: {
        classObject() {
            return {
                active: true,
                bold: true,
            }
        }
    },
});

style绑定

方案一

<div id="app" style="font-size: 20px;color: red;" v-bind:style="{color:activeColor}">
    {{message}}
</div>

<script src="../js/vue.js"></script>
<script>
    //去掉警告
    Vue.config.productionTip = false;

    //数据对象
    const dataObj = {
        message: 'hello,vue',
        activeColor:'blue'
    };

    const app = new Vue({
        el: '#app',
        data: dataObj,
        computed: {
        },
        method: {}
    });
</script>

方案二