类名jade中的变量

Posted 2023-03-03

【中文标题】类名jade中的变量

【英文标题】：variable in class name jade

【发布时间】：2012-11-20 01:41:41

【问题描述】：

我不能在jade的类中设置变量名：

.flag_# session.locale  # session.locale 

我有：

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

我想拥有

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

谢谢

【参考方案1】：

试试这个（未测试）：

div(class="flag_# session.locale ") session.locale

【讨论】：

请注意，如果您在 Jade 中已有课程，这也可以使用，如下所示：.flag(class="flag_#session.locale") session.locale => <div class="flag flag_en_GB">en_GB</div>

工作就像一个魅力

【参考方案2】：

至于 pug@2.0.0-alpha3 是这样工作的：

div(class="flag_" + session.locale) session.locale

【讨论】：

检查您正在使用的版本 - @karaxuna 的解决方案不再适用于哈巴狗

【参考方案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>

【参考方案4】：

你也可以使用conditional statements来做这样的事情

  if liked == true
    span.like.active
  else
    span.like

【参考方案5】：

您也可以使用template literal：

- 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>