一聚教程网:一个值得你收藏的教程网站

热门教程

vue实现条件判断动态绑定样式的方法

时间:2022-06-25 15:35:13 编辑:袖梨 来源:一聚教程网

在我们做前端页面的时候,为了美观和直观,我们希望通过条件判断来让页面显示不同的样式,如下图所示:

当值为“是”时,显示绿色的标签,当值为“否”时,显示为灰色的标签。

标签的样式分别为:

绿色标签
灰色标签

关键在于type的样式部分,我们利用vue的样式绑定,结合三元表达式使用

:type="{条件} ? {如果为真} : {否则}"

在代码中:

{{
 scope.row.is_multiple }}

这样效果即可出来了。

热门栏目