Pug计数器语法报错：如何在非标签内实现变量自增计数？

嘿，我来帮你搞定这个问题～你遇到的语法错误其实是因为Pug把你的i++当成HTML标签来解析了，而不是JavaScript代码。

错误原因 #

在Pug中，所有独立的JavaScript代码行必须以-开头，否则Pug会把它当作HTML标签处理。你原代码里的i++没有加-前缀，所以Pug试图解析成<i++>标签，这自然会触发语法错误。

正确的实现方式 #

这里有几种常用的方法可以在标签外部完成计数：

方法1：在while循环内用代码行自增变量

给i++加上-前缀，明确告诉Pug这是JavaScript代码，同时保持正确的缩进：

html
  head
    link(href="ok.css")
  body
    - var i = 0
    - var max_li = 10
    ul
      while i < max_li
        - i++  // 现在这是正确的JavaScript代码行
        li  // 生成第i个li标签

方法2：在循环条件中直接自增

如果不想单独写一行自增代码，可以把i++整合到while的判断条件里，写法更简洁：

html
  head
    link(href="ok.css")
  body
    - var i = 0
    - var max_li = 10
    ul
      while (i++ < max_li)  // 每次循环先判断条件，再完成自增
        li

方法3：用for循环替代while（更直观）

其实生成固定数量的标签，用for循环往往更清晰，不需要单独维护计数器的自增逻辑：

html
  head
    link(href="ok.css")
  body
    - var max_li = 10
    ul
      - for (let i = 0; i < max_li; i++)  // 循环内部直接处理计数逻辑
        li

这样就能轻松生成10个<li>标签，而且计数器操作完全在标签外部完成啦～

内容的提问来源于stack exchange，提问作者LΞИIИ