Pug迭代

两种主要的迭代方式: each 和 while

一、each

1、最简单的迭代

ul
  each val in [1, 2, 3, 4, 5]
    li= val

等价于-->
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

2、迭代同时获取索引值index

ul
  each val, index in ['〇', '一', '二']
    li= index + ': ' + val

等价于-->
<ul>
  <li>0: 〇</li>
  <li>1: 一</li>
  <li>2: 二</li>
</ul>

3、迭代对象中的键值

ul
  each val, index in {1:'一',2:'二',3:'三'}
    li= index + ': ' + val

等价于-->
<ul>
  <li>1: 一</li>
  <li>2: 二</li>
  <li>3: 三</li>
</ul>

4、else,用于没有被迭代的值时执行

- var values = [];
ul
  each val in values
    li= val
  else
    li 没有内容

等价于-->
<ul>
  <li>没有内容</li>
</ul>

二、while

- var n = 0;
ul
  while n < 4
    li= n++

等价于-->
<ul>
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue学习笔记-列表渲染

    听着music睡
  • 关于Activity销毁,而绘制UI的子线程未销毁出现的问题

    听着music睡
  • RecyclerView解析--onViewDetachedFromWindow()/onViewAttachedToWindow()

    听着music睡
  • 使用webpack打包js文件(隔行变色案例)

    Dream城堡
  • 隔行变色

    河湾欢儿
  • 第3章 排列清单控制标记

    排列清单控制标记可以创建一般的列表、编号列表或加着重号列表,以及定义列表。还可以在一种列表中嵌套另外一种列表。对于概况因特网上的内容,列表特别重要。

    py3study
  • js 为 li 循环添加 class

    前段时间有个小伙伴想在新闻列表页面的 ul 里面为每个 class 循环添加带 1  2  3  4的 class,正巧昨天做一个站也用到了类似 for 循环,...

    Savalone
  • li、img等元素设置inline-block后的空白间距问题

    关于使用 inline-block 来代替 float 的讨论也挺多的,最常见的就是使用 inline-block 来代替 float 进行布局。

    德顺
  • JS示例15-模运算应用(隔行变色)

    专注APP开发
  • CSS基础--属性选择器、伪类选择器

    eadela

扫码关注云+社区

领取腾讯云代金券