Comment passer la valeur de variable de boucle dans une classe d'une balise d'ancrage dans un moteur de gabarit PUG?

Question

J'essaie d'imprimer <a> tag 5 fois en utilisant PUG modèle moteur.

Je veux que mon code soit comme ci-dessous. Là où je veux seulement deux article classe et article-1,2,3 etc.

code HTML: résultat souhaité

<a class="item item-1" href="#">1 Item</a><br/> 
<a class="item item-2" href="#">2 Item</a><br/> 
<a class="item item-3" href="#">3 Item</a><br/> 
<a class="item item-4" href="#">4 Item</a><br/> 

J'utilise ce code maintenant qui est inférieure et fonctionne bien

code PUG

- for (var x=1; x < 6; x++) 
    a.item.item-(href='#') #{x} Item 
    br 

Quelle sortie en HTML est inférieure et #{x} variable impressio

<a class="item item-" href="#">1 Item</a><br/> 
<a class="item item-" href="#">2 Item</a><br/> 
<a class="item item-" href="#">3 Item</a><br/> 
<a class="item item-" href="#">4 Item</a><br/> 
<a class="item item-" href="#">5 Item</a><br/> 

Mais quand je suis en utilisant la variable #{x} comme ci-dessous, il affiche l'erreur

- for (var x=1; x < 6; x++) 
    a.item.item-#{x}(href='#') #{x} Item 
    br 

Erreur

Pug:2:17 
    1| - for (var x=1; x < 6; x++) 
    > 2|  a.item.item-#{x}(href='#') #{x} Item 
-----------------------^ 
    3|  br 

Unexpected token `interpolation` expected `text`, `interpolated-code`, `code`, `:`, `slash`, `newline` or `eos` 

Je suis conscient que nous utilisons # pour l'identification mais pourquoi est-ce pas une valeur d'impression de x après item- en classe?

Answer 1

J'ai réussi à obtenir le résultat souhaité en modifiant le code comme indiqué dans Pug's documentation:

- for (var x=1; x < 6; x++) 
    a(class='item item-'+x)(href='#') #{x} Item 
    br 

Codepen: https://codepen.io/anon/pen/YrqBdY

Answer 2

Vous pouvez l'écrire comme ceci:

- for (var x=1; x < 6; x++) 
    a.item(href='#', class="item-#{x}") #{x} Item 
    br