Vue的样式（class和style）绑定

vue.js中使用样式绑定，有class属性和内联样式

class属性的绑定：

<style>
        .red{
            color:red;
        }
        .bold{
            font-weight: bold;
        }
</style>

<!--直接使用style中定义的class样式，采用的是数组对象-->
<p :class="['bold','red']">这是class属性绑定测试</p>

<!--使用三元运算符-->
<p :class="['bold',flag?'red':'']">这是class属性绑定测试</p>


<!--使用嵌套对象，其中key可以不用带单引号，不过为了统一建议会用单引号，value值为一个boolean值-->
<p :class="['bold',{'red':flag}]">这是class属性绑定测试</p>

<!--使用对象，其中key可以不用带单引号，不过为了统一建议会用单引号，value值为一个boolean值-->
<p :class="{'bold':true,'red':flag}">这是class属性绑定测试</p>


vm中data  flag:true

     使用对象时，其中key可以不用带单引号，不过为了统一建议会用单引号，value值为一个boolean值

内联的style属性绑定

    <!--style对象，key为样式的属性名,value为class的style属性-->
    <!--可有可无引号，通常采用第一种写法-->
    <p :style="{fontWeight:'bold'} ">这是style属性绑定测试</p>
    <p :style="{'fontWeight':'bold'} ">这是style属性绑定测试</p>

    <!--此类写法必须在引号内-->
    <p :style="{'font-weight':'bold'} ">这是style属性绑定测试</p>

    <!--采用数组形势-->
    <p :style="[{fontWeight:'bold'},{color:'color'}]">这是style属性绑定测试</p>

    使用对象时，key值可不用带引号，此时为样式名的驼峰表示，如果采用原样式名则必须加引号，value值为style中定义的class名且必须加引号