Nodejs中jade模板的if该怎么写

Nodejs中jade模板的if该怎么写

-if(tag.selected)
li.active
-else
li
a

想得到<li class=“active”><a /></li>， 实际结果是<li class=“active”></li><a />

我知道换种写法

  -if(tag.selected)
         li.active
             a
        -else
         li
             a

但这样jade的if语法也太弱了，只是为了给父元素加个class就要把子元素写两遍， 是不是有别的写法？


5 回复

在Node.js中使用Jade（现在更名为Pug）模板引擎时，处理条件语句确实需要一些技巧。你提到的问题是因为if语句只影响其直接后续的行，而不会影响到更深层级的结构。为了解决这个问题，你可以考虑使用嵌套的块来实现你的需求。

以下是改进后的示例代码：

ul
  if tag.selected
    li.active
      a(href="#") 点击我
  else
    li
      a(href="#") 点击我

这段代码将生成以下HTML：

<ul>
  <li class="active">
    <a href="#">点击我</a>
  </li>
</ul>

<!-- 或者 -->
<ul>
  <li>
    <a href="#">点击我</a>
  </li>
</ul>

如果你希望减少重复代码，可以使用嵌套的方式来简化结构：

ul
  if tag.selected
    li.active
  else
    li
  a(href="#") 点击我

但是，这种方式可能无法达到预期效果，因为a标签会被放置在li标签之外。

为了更优雅地解决这个问题，你可以考虑使用JavaScript表达式来动态生成类名：

ul
  li(class=`${tag.selected ? 'active' : ''}`)
    a(href="#") 点击我

这段代码会根据tag.selected的值动态添加或省略active类名。

总结一下，虽然Jade的if语句本身比较简洁，但在处理复杂的条件逻辑时，可能需要结合其他方法来实现更灵活的效果。通过上述方法，你可以更好地控制生成的HTML结构，并保持代码的清晰度。


  • var class="" -if(tag.selected) var class=“active”

li(class="#{class}") a

这样解决吧。。我反正也没找到更好的办法。都是先写一堆js在上面，然后下面填空。。

哈哈，jade这方面果然挫

一个小错误，a不是单闭合的标签，必须双闭合

你提到的情况是因为 Jade（现在称为 Pug）模板引擎对缩进非常敏感。你的问题在于 if 语句内部的子元素应该正确地嵌套在 if 或 else 块中。

这里有一个简单的示例来展示如何正确使用 if 语句，并且只在条件满足时添加 class 属性：

ul
  - if (tag.selected)
    li.active
      a(href='/') Link Text
  - else
    li
      a(href='/') Link Text

在这个例子中：

  1. 如果 tag.selected 为真，则会渲染 <li class="active">。
  2. 否则，只会渲染 <li>。
  3. 在这两种情况下，a 标签都会被包含在 li 中。

如果你希望避免重复书写 a 标签，可以考虑将 a 标签的渲染逻辑提取出来，或者通过 JavaScript 动态生成类名。但是基于当前的 Pug 模板语法，上述方法是最直接和简洁的方式。

如果你有更复杂的条件逻辑，可以考虑使用 mixin 或者将某些部分封装成可重用的组件。这样即使结构变得复杂，也可以保持代码的清晰和可维护性。

回到顶部