美文网首页
动态绑定样式(class/style)

动态绑定样式(class/style)

作者: 九瀺 | 来源:发表于2019-09-29 02: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
}

相关文章

网友评论

      本文标题:动态绑定样式(class/style)

      本文链接:https://www.haomeiwen.com/subject/pmpxpctx.html