输入类型属性中的 pug mixin答案

【问题标题】：pug mixin inside input type attribute输入类型属性中的 pug mixin
【发布时间】：2021-06-05 04:30:46
【问题描述】：

我有这个pug mixin。我的问题是如何将1 替换为 id 参数？

mixin workExperience(id, position, company, dateFrom, dateTo)
  section#work
    section.work-item
      input.toggle-item(id='work-item-1' type='checkbox' checked='checked')
      label(for='work-item-1')
      header
        .position= position
        .company= company
        .date
          span.startDate= dateFrom
          span.endDate= dateTo

【问题讨论】：

标签： pug

【解决方案1】：

您可以将字符串和 id 参数与 addition operator 连接起来，就像在 JavaScript 中所做的那样：

input.toggle-item(id='work-item-' + id type='checkbox' checked='checked')
label(for='work-item-' + id)

在属性之间使用逗号或将id 属性的值括在括号中可能更清楚，尤其是在第一种情况下：

input.toggle-item(id='work-item-' + id, type='checkbox', checked='checked')

input.toggle-item(id=('work-item-' + id) type='checkbox' checked='checked')

所有三个选项产生相同的结果，但最后两个比第一个更具可读性。

另一种选择是使用template literal：

input.toggle-item(id=`work-item-${id}` type='checkbox' checked='checked')
label(for=`work-item-${id}`)

我想我最喜欢这个选项。

【讨论】：