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 中使用Pug

    码农笔录
  • 在 Vue 项目中(vue-cli2,vue-cli3)使用 pug 简化 HTML 的编写

    要注意的一点是: 标签后面如果有属性(括号内的) 他和括号之间不要加空格,加了空格就会被当成字符串解析,详细可查看官方文档

    用户1065635
  • Pug入门

    Pug是一款健壮、灵活、功能丰富的HTML模板引擎,专门为 Node.js 平台开发。Pug是由Jade 改名而来。

    听着music睡
  • Gulp-自动化编译sass和pug文件

    xing.org1^
  • 那些最受欢迎的 Node.js 视图引擎[每日前端夜话0xA7]

    Node js 视图引擎就像 Laravel 中的 Blade。其最基本的定义是,视图引擎是帮助我们用比通常更短、更简单的方式编写 HTML 代码并重用的工具。...

    疯狂的技术宅
  • Pug模板继承与拓展

    如下:便有三个代码块block scripts,block content,block foot

    听着music睡
  • 扩展 Vue 组件

    你是否在开发基于 Vue 的 app 时使用过具有相同属性甚至具有相同的 template 结构的组件?

    疯狂的技术宅
  • Java编程思想第五版(On Java8)(十二)-集合

    通常,程序总是根据运行时才知道的某些条件去创建新的对象。在此之前,无法知道所需对象的数量甚至确切类型。为了解决这个普遍的编程问题,需要在任意时刻和任意位置创建任...

    JavaEdge
  • 使用Webpack快速配置编写HTML基础环境

    用户1203875
  • Express 应用程序生成器/脚手架

    Express官方提供 express-generator 可以快速创建一个Express应用的骨架。

    Javanx
  • Pug嵌入

    听着music睡
  • 迭代(iterable)和迭代器

    简介: 迭代(iterable) #任何可迭代对象都可以作用于for循环,包括我们自定义的数据类型,只要符合迭代条件,就可以使用for循环 d = {'a': ...

    狼啸风云
  • python迭代、可迭代对象、迭代器及生

    通常意义上的迭代是指:重复执行一系列运算,从前面的量依次推出后面的量的过程,每一次迭代的结果,会作为下一次迭代的初始值。

    py3study
  • Vue笔记:VS Code 常用快捷键

    1、Auto Rename Tag 修改 html 标签,自动帮你完成尾部闭合标签的同步修改,和 webstorm 一样。

    朝雨忆轻尘
  • 吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧《上》

    之前使用过 Vue 开发后台、中台项目,也做过移动端 H5,弄过一点小的前端架构。每做一个项目都会收获了不一样的经验和理解。下面我把这些点点滴滴的经验总结下来,...

    秋风的笔记
  • Express服务器开发

    让我们来创建Express应用程序,Express是一个Node.js Web应用框架,它很强大,可以为用户创建各种Web应用和HTTP工具,使用Express...

    达达前端
  • Nuxt.js 开发SSR(服务端渲染)Web应用

    Nuxt.js 能够胜任 VuePress 的功能,但它专为构建应用程序而设计,而 VuePress 更适合构建以内容为中心的静态站点,如技术文档,博客等。

    我是一条小青蛇
  • Express新建项目与配置项目热加载

    CherishTheYouth
  • ​迭代

    这些概念都表示“重复”的含义, 彼此互相交叉, 在上下文清晰的情况下, 不必做过于细致的区分.

    PayneWu

扫码关注云+社区

领取腾讯云代金券