微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

哈巴狗:有条件的父div,不复制子对象

如何解决哈巴狗:有条件的父div,不复制子对象

我们有这样的东西:

 .child
   a.child-2
     img(src)

如果我想为此元素添加包装,我会这样做:

if something === true
  .parent
     .child
       a.child-2
         img(src)
else
     .child
       a.child-2
         img(src)

如果有很多孩子,我们会遇到加倍和可读性差的问题 我该如何为包装元素单独编写条件,而无需做出else语句并复制其中的每个子元素?

解决方法

这是Pug mixin with a mixin block的绝佳用例:

mixin conditionalWrapper(arg)
  if arg
    .parent
       block
  else
    block

block声明将呈现mixin的所有子级。可以这样使用。如果参数为true,则内容将在.parent包装器中呈现。如果为假,将在不使用包装的情况下进行渲染。

- let something = true

+conditionalWrapper(something)
  .child
    a.child-2
     img(src)

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。