37

我无法在翡翠的类中设置变量名：

.flag_#{ session.locale } #{ session.locale }

我有：

<div class="flag_" >en</div>

我想拥有

<div class="flag_en" >en</div>

谢谢

4

5 回答 5

77

试试这个（没有测试过）：

div(class="flag_#{ session.locale }") session.locale
于 2012-12-02T12:24:32.823 回答
16

至于 pug@2.0.0-alpha3 以这种方式工作：

div(class="flag_" + session.locale) session.locale
于 2016-04-19T14:19:57.493 回答
3

这是另一种方法：

mixin formButton(text, type, extra_classes)
    - var default_classes = 'btn btn-primary'
    if extra_classes
        - var classes = default_classes + ' ' + extra_classes
    else
        - var classes = default_classes

    if type
        button(class=classes type=type) !{text}
    else
        button(class=classes type="submit") !{text}


示例 1：

用法：

+formButton('Text')

结果：

<button type="text" class="btn btn-primary" type="submit">Text</button>


示例 2：

用法：

+formButton('Text', 'button')

结果：

<button type="text" class="btn btn-primary" type="button">Text</button>


示例 3：

用法：

+formButton('Text', 'button', 'extra-class')

结果：

<button type="text" class="btn btn-primary extra-class" type="button">Text</button>
于 2015-06-13T20:47:59.327 回答
2

您还可以使用条件语句来执行此操作，例如

  if liked == true
    span.like.active
  else
    span.like
于 2015-04-18T03:06:19.800 回答
0

您还可以使用模板文字：

- const session = { locale: 'en' }
div(class=`flag_${session.locale}`) #{session.locale}

//- Just to show more options:

div(class=`flag_${session.locale}`)= session.locale
div(class=`flag_${session.locale}`) Current language is #{session.locale}
div(class=`flag_${session.locale}`)= `Current language is ${session.locale}`

输出（使用 Pug 2.0.4）：

<div class="flag_en">en</div>
<div class="flag_en">en</div>
<div class="flag_en">Current language is en</div>
<div class="flag_en">Current language is en</div>
于 2021-01-21T19:03:17.547 回答