Jade - 迭代中的跨度

Question

如何在遍历字典时添加跨度？

  ul(class="nav navbar-nav")
  - var currency = {'Dollar':'0,12', 'Euro':'0,18', 'TL':'0.341', 'SEK':'0,18', 'MEK':'0.341', 'YEN':'0,18', 'NOK':'0.341'}
  - each v, c in currency
      li=c + ": " + v

我希望 "c" 的货币为粗体。

此代码输出：Dollar:0,12 Euro:0,18 等

我要：美元:0,12 欧元:0,18

Answer 1

- each v, c in currency
    li
        strong= c
        span : #{v}

或

- each v, c in currency
    li #[strong= c]: #{v}

Answer 2

奇怪的是，冒号 (:) 原来是棘手的部分，但有几种方法可以做到这一点。一种是使用 tag interpolation，它看起来像这样：#[span.my-currency= c].

ul.nav.navbar-nav
  - each v, c in currency
    li #[span.my-currency= c]:#{v}

或者您可以使用 JavaScript (+) 连接，如下所示：

ul.nav.navbar-nav
  - each v, c in currency
    li
      span.my-currency= c
      = ":" + v

或：

ul.nav.navbar-nav
  - each v, c in currency
    li
      span.my-currency= c
      | :
      = v

这是一个片段：

var template = document.getElementById('template').innerHTML;
var target = document.getElementById('target');

var currency = { Dollar: '0,12', Euro: '0,18', TL: '0.341', SEK: '0,18', MEK: '0.341', YEN: '0,18', NOK: '0.341' };
target.innerHTML = jade.compile(template)({ currency: currency });

.my-currency { font-weight: bold; }
pre { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jade/1.11.0/jade.min.js"></script>
<pre id="template">
ul.nav.navbar-nav
  - each v, c in currency
    li #[span.my-currency= c]:#{v}

ul.nav.navbar-nav
  - each v, c in currency
    li
      span.my-currency= c
      = ":" + v

ul.nav.navbar-nav
  - each v, c in currency
    li
      span.my-currency= c
      | :
      = v
</pre>
<div id="target"/>

Jade - 迭代中的跨度

Jade - span in iteration

pug