- 凡是有
-
的style属性名都要变成驼峰式,比如font-size要变成fontSize
- 除了绑定值,其他的属性名的值要用引号括起来,比如
backgroundColor:'#00a2ff'
而不是 backgroundColor:#00a2ff
【对象】
html :style="{ color: activeColor, fontSize: fontSize + 'px' }"
-
html :style="{color:(index==0?conFontColor:'#000')}"
【数组】
html :style="[baseStyles, overridingStyles]"
html :style="[{color:(index==0?conFontColor:'#000')},{fontSize:'20px'}]"
【三目运算符】
html :style="{color:(index==0?conFontColor:'#000')}"
html :style="[{color:(index==0?conFontColor:'#000')},{fontSize:'20px'}]"
【多重值】
此时,浏览器会根据运行支持情况进行选择
html :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"
【绑定data对象】
html :style="styleObject"
vue动态添加class的几种方式
p1,p为类名
【对象】
对象的形式: 用花括号包裹起来,类名用引号,
第一个参数 类名, 第二个参数:boolean值
优点: 以对象的形式可以写多个,用逗号分开
【数组】
三元表达式
注意点:放在数组中,类名要用引号
html :class="[ 1 < 2 ? 'p1' : 'p' ]"
【返回方法】class中还可以传方法,在方法中返回类名
1.用:style的方式
HTML部分:
2.用:class的方式
HTML部分:
CSS部分:
(附: 添加多个类名的情况 参考文章:vue中动态添加class类名_gary的博客-CSDN博客_vue 动态类名(vue中动态添加class类名))
Comments | NOTHING