1.直接在元素上通过:style的形式,书写样式对象
<h1 :style="{color:'red','font-weight':200}">这是一个H1</h1>
2.将样式对象定义在data中,并直接引用到:style中
1:在data上定义样式
data:{ styleObj1:{color:'blue','font-weight':200,'font-size':'40px'}, }
2:在元素中,通过属性绑定的形式,将样式对象应用到元素中
<h1 :style="styleObj1">这是一个H1</h1>
3.在:style中通过数组,引用多个data上的样式对象
1:在data上定义样式
data:{ styleObj1:{color:'blue','font-weight':200,'font-size':'40px'}, styleObj2:{'font-style':'italic'}, }
2:在元素中,通过属性绑定的形式,将样式对象应用到元素中
<h1 :style="[styleObj1,styleObj2]">这是一个H1</h1>
完整代码:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id='app'> <h1 :style="{color:'red','font-weight':200}">这是一个H1</h1> <h1 :style="styleObj1">这是一个H1</h1> <h1 :style="[styleObj1,styleObj2]">这是一个H1</h1> </div> </body> <script src="/UploadFiles/2021-04-02/vue.min.js">
最新资源
- 魔兽世界wlk阿奴巴拉克怎么打 wlk阿奴巴拉克机制
- 归龙潮阿律的笛子位置在哪 阿律的笛子图文位置一
- 归龙潮中浦城区福鼠位置在哪 中浦城区福鼠收集位
- NewViennaOctetViennaWindSoloists-TheDeccaRec
- MatteoPasqualini-JohannSebastianBachItalieni
- 【雨果唱片】陈百强《梦里人LPCD45》2012[WAV+C
- 《黑神话》纪录片9月20日上线!揭秘关卡为何删减
- 游戏科学估值已和育碧市值相当:后者有两万多名员
- 黑神话第81周目Boss伤害有多恐怖?起手伤害直接秒
- 群星.2009-原班情歌2CD【SONY】【WAV+CUE】