web前端样式绑定

#外联绑定

1.对象绑定：

v-bind:class="classobject"

2数组绑定：

v-bind:class="[class1,class2]"

#内联绑定

<p v-bind:style="fontWeight:weight,color:color">

#非内联

<p v-bind:style="classobject">

#计算属性绑定

<p v-bind:style="show">计算属性绑定</p>

computed:{
show:function(){
return{
fontWeight:this.weight,
'font-size':this.fontSize+'px'
}
}

#数组语法

1,v-bind:class="[{fontWeight:weight},{color:color}]"

2,v-bind:class="arraystyle"

data{

　　arrstyle:[{

fontSize:'25px'

},{

'font-weight':'bold'

}]　　

}

3,v-bind:class="[size,weight,color]"

data:{

size:{fontSize:'25px'},

weight:{'font-weight':'bold'},

color:{'color':'red'}

}