vue styel,class简单介绍

标签class属性

class: 一个

data:{
	    bgred : 'red',
	    flag:true
}
<p :class="bgred"> 字符串</p>

 <p class="zhijie"> 字符串</p>

<p :class="{blod:flag}"> 对象布尔值</p>

class: 多个

data:{
	    bgred : 'red',
	    colored:'blod',
	    flag:true
}
computed:{
	 classes() {
      return {
        active: this.flag,
        'text-fail': this.flag
      }
    }
}
 <p :class="[ bgred, colored ]">数组字符串</p>
 
 <p :class="[{blod:flag},colored]">数组混合 </p>
 
 <p :class='classes'>计算属性: class="active text-fail"</p>

标签style属性

data:{
    styObj: {
      color: 'red',
      fontSize: '13px'
    },
    stycolr: {
      'color': 'blue'
    },
    stybg: {
      'background': '#666'
    },
    res: 'red'
}
<p :style="styObj"> 对象 </p>

<p :style="{'color':res}"> 字符串：res:'red'</p>

<p :style="[stycolr,stybg]">数组对象:stycolr:{'color':'blue'},stybg:{'background':'#666'}</p>