vue中通过数据绑定为元素设置样式

通过数据绑定可以为元素设置class样式和style样式
一，class样式的设置
------html中的代码

<div id="app">
<!-- 第一种使用方式是直接传递一个数组，这里的的class需要用到v-bind属性 -->
            <!-- <h1 :class="['red','thin','Italic']"> 这是一个很大的h1标签，大到你无法想象！！</h1> -->
            <!-- 三元表达式的使用 -->
            <!-- <h1 :class="['red','thin',flag?'active':'']">这是一个很大的h1标签，大到你无法想象！！</h1> -->
           <!-- 在数组中使用对象可以代替三元表达式，且可以提高代码的可读性 -->
            <!-- <h1 :class="['red','thin',{'active':flag}]">这是一个很大的h1标签，大到你无法想象！！</h1> -->
            <!-- 在数组中直接用v-bind 绑定对象，且这个对象中的属性可以加引号，或者不加引号，属性值为标识符 -->
            <h1 :class="{ red:true,thin:true,Italic:true,active:false}">这是一个很大的h1标签，大到你无法想象！！</h1>
        </div>
        <script>
            var vm= new Vue({
                el:'#app',
                data:{
                    flag:true

                },
            });
        </script>

二.style样式的设置

<div id="app" >
            <h1 style="color:lawngreen;font-weight: 100;">这是一个h1标签</h1>
            <!--属性名之间有‘-’要加单引号-->
            <h2 :style="styleobj1">这是一个h2标签</h2>
            <h2 :style="[styleobj1,styleobj2]">这是一个h2标签</h2>

    </div>
    <script>
        var vm =new Vue({
            el:'#app',
            data:{
                styleobj1:{color:'pink','font-weight':500 },
                styleobj2:{'font-style':'italic'}
            }
        })
    
    </script>