vue如何绑定class

在前端工作中,vue作为经常出现的框架还是很重要的,今天文汇软件就来和大家谈谈vue如何绑定class。

首先我们先说下vue绑定的优点:

一.绑定的class不会与原来已有的class冲突,并且内部可以做三元运算进行判断

像下图本来已经绑定了x和y的类,x是背景色,y是字体大小,后面是vue绑定的z类,z是字体是粉色,这在原来的html中,一个元素有两个类名,默认只会识别第一个,而现在同样没有冲突

1600005975(1).png

1600005766(1).jpg

再来看html结构,z类已经合并到之前的类中了

1600006045(1).png

除此之外绑定的类可以是数组或者对象,并根据true和false执行相应的类,如下图

1600006333(1).png

1600006484(1).png

它还可以让你根据对象中选取键的形式选择你要是用的类

1600006606(1).png

此时,变只会出现你要选取的y的类了

1600006870(1).png

最后它还可以支持循环,像是下图单数的没有x的类,双数的则会有x的类

1600007028(1).png

1600007136(1).png

以上就是小编分享的了,如果喜欢的话就来文汇软件关注小编吧

关键词:
返回列表

相关文章

相关案例