绑定CSS样式

1. class样式

写法： class='xxx' xxx可以是字符串、对象、数组。
字符串写法适用于：类名不确定，要动态获取。
对象写法适用于：要绑定多个样式, 个数不确定, 名字也不确定。
数组写法适用于： 要绑定多个样式，个数确定，名字也确定，但不确定用不用。

2. style样式

:style="{fontSize:xxx}" 其中xxx是动态值。
:style="[a, b]" 其中a、b是样式对象。样式对象就是中的key是存在的css属性。

html部分

<div id="editor">
    <button v-on:click="changeCSS()">改变样式</button>
    <!--绑定class样式---字符串写法, 适用于：样式的类名不确定，需要动态指定-->
    <div class="hello" v-bind:class="myClass">温馨提示：</div>
    <br/>
    <br/>
    <!--绑定class样式---数组写法, 适用于：样式的个数不确定，名字也不确定-->
    <div class="hello" v-bind:class="fixHome">温馨提示：</div>
    <br/>
    <br/>
    <!--绑定class样式---对象写法, 适用于：样式的个数确定，名字也确定,但要动态决定用不用-->
    <div class="hello" v-bind:class="classObj">温馨提示：</div>
    <br/>
    <br/>
    <!--绑定内联style样式---对象写法-->
    <div class="hello" :style="styleObj">温馨提示：</div>
    <br/>
    <br/>
    <!--绑定内联style样式---数组写法-->
    <div class="hello" :style="[styleObj, styleObj1]">温馨提示：</div>
</div>

js部分

Vue.config.productionTip=false
    const vm = new Vue({
        // el: "#editor",
        data() {
            return {
                myClass: '',
                fixHome: ['homeSize', 'newHome'],
                classObj:{
                    homeSize: false,
                    newHome: true
                },
                styleObj:{
                    fontSize: '40px'  //-转驼峰命名,并且这些样式名称是提前定义好的
                },
                styleObj2:{
                    backgroundColor: 'orange'  //-转驼峰命名,并且这些样式名称是提前定义好的
                },
            }
        },
        methods:{
            changeCSS(){
                this.myClass = 'homeSize'
            }
        }
    });
    vm.$mount("#editor");