vue中的样式

1.不在vue的时候可直接用class类引入。

其中,active,thin,red 是在style样式中定义好的样式。

<h1 class="active thin red">不积跬步,无以至千里</h1>

2.在为class 使用v-bind 绑定 对象的时候,对象的属性是类名。

其中,calssObj是在new出来的vue中的data中的定义的一个对象。

<h1 :class="calssObj">不积跬步,无以至千里</h1>

data 中定义的对象,calssObj。red,thin,italic,active是在style标签中定义的样式。

data:{
    calssObj:{red:true, thin:true, italic:true, active:false}
},

3.行内样式。

<h1 :style="[calssObj1,calssObj2]">不积跬步,无以至千里</h1>

其中,calssObj1,calssObj2为data中定义好的行内样式

data:{//对象是无序键值对的集合。
    calssObj1:{color:'red','font-weight':200},
    calssObj2:{'font-style':'italic'}
},

 

posted @ 2019-12-15 22:09  香香香。。。。香菜  阅读(321)  评论(0编辑  收藏  举报