首页 > 解决方案 > 一种基于 riosJS 中的 1 验证在 DOM 元素上添加多个类的方法

问题描述

假设我想根据我拥有的布尔变量在我选择的 DOM 元素上添加 2 个类。使用 1 类,这将非常简单,只需执行以下操作:

<span class="{ class1 : variable }">Text</span>

但是2+班呢?

我尝试过:

<span class="{ class1, class2 : variable }">Text</span>

<span class="{ ['class1', 'class2'] : variable }">Text</span>

<span class="{ class1 &amp;&amp; class2 : variable }">Text</span>

有没有实际的方法或者现在不可能?

我只是想避免这样做:

<span class="{ class1: variable } { class2: variable }">Text</span>

谢谢。

标签: htmlriot.js

解决方案


这是可能的,是的。

如果class1并且class2是实际的 CSS 类,这将起作用:

<div class={"class1 class2": flag}>text</div>

如果class1并且class2只是保存 CSS 类名的变量,我会使用这样的东西:

<div class={flag ? `${this.class1} ${this.class2}` : ''}>text</div>

推荐阅读