动态绑定样式(class/style)

2019-09-29  本文已影响0人  九瀺

:class

:class = 'xxx'

xxx是字符串
xxx是对象
xxx是数组

.aClass{ color:red;}
.bClass{ color:blue;}
...
<p :class = "a">xxx是字符串</p>
data : {    a : aClass,}
...

<p :class = "{ aClass:isA, bClass:isB}">xxx是对象</p>
data:{    isA:true,    isB:flase}
...
<p :class = "['aClass']">xxx是数组</p>

:style

:style = "{color:activeColor,fontsize: fontSize + 'px'}"( activeColor/fontSize为data中属性)

<p :style ="{color:activeColor,fontsize: fontSize + 'px'}" >style属性绑定</p>

data : {  
  activeColor : 'red',   
  fontSize : 20
}
上一篇 下一篇

猜你喜欢

热点阅读