如何正确地将自定义元素列表传递给类属性？答案

【问题标题】：How to pass custom elements list to the class attribute properly?如何正确地将自定义元素列表传递给类属性？
【发布时间】：2018-08-16 23:00:17
【问题描述】：

我的模板中有一行：

<div class="class1 class2 class3 {{ foo_classes }}">

如果foo_classes 为空，我会得到class="class1 class2 class3 "。我想得到的是class="class1 class2 class3"，在类列表的末尾没有额外的空间。

<div class="class1 class2 class3{{ foo_classes }}">

如果我删除空格（查看上面的行），我会得到class="class1 class2 class3class4 class5"，这也好不到哪里去。

如果foo_classes 为空，我如何传递其他类以避免在类部分末尾出现不必要的空间？

【问题讨论】：

标签的class 属性末尾的这个多余的空间有什么特殊原因会成为问题吗？只是好奇。
浏览器会以同样的方式对待class="class1 class2 class3 "和class="class1 class2 class3"，所以一种选择是不用担心空间。
没有什么特别的原因，我只是好奇避免了真正值得在模板中添加额外{% if %} 语句的空间。

【解决方案1】：

一种方法是使用if 标签：

<div class="class1 class2 class3{% if foo_classes %} {{ foo_classes }}{% endif %}">

【讨论】：

我明白了，但我也不想在模板中添加额外的模板标签/逻辑内容。这是最好/唯一的方法吗？另外，在课程列表末尾留出空格真的有问题吗？还是我可以留着？
@Dibidalidomba 类列表末尾的空白真的不是问题。它经常发生，尤其是在这种情况下。 {% if %} 语句的开销比空格可能增加的任何额外大小都要多。

【解决方案2】：

如果问题太大，请更改向模板添加类的方式，以便始终只使用变量：

<div class="{{ foo_classes }}">

因此您将始终将class1 class2 class3 存储在该变量中，但有时您会使用附加/额外类（例如class1 class2 class3 class4）来切换它

这是很常见的解决方案，例如在 Vue.js 世界中，您倾向于将动态的类列表存储在变量中并将其传递给模板，而不是连接字符串。

【讨论】：