好资源导航 » 文章资讯 » Vue中通过属性绑定为元素绑定style行内样式的实例代码

Vue中通过属性绑定为元素绑定style行内样式的实例代码

2023-07-26 10:44:03 72

1.直接在元素上通过:style的形式，书写样式对象

这是一个H1

2.将样式对象定义在data中，并直接引用到:style中

1:在data上定义样式

data:{
styleObj1:{color:'blue','font-weight':200,'font-size':'40px'},
}

2:在元素中，通过属性绑定的形式，将样式对象应用到元素中

这是一个H1

3.在:style中通过数组，引用多个data上的样式对象

1:在data上定义样式

data:{
styleObj1:{color:'blue','font-weight':200,'font-size':'40px'},
styleObj2:{'font-style':'italic'},
}

2:在元素中，通过属性绑定的形式，将样式对象应用到元素中

这是一个H1

完整代码:


	
	
	



这是一个H1

这是一个H1

这是一个H1

到此这篇关于Vue中通过属性绑定为元素绑定style行内样式的文章就介绍到这了,更多相关vuestyle行内样式内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！