嘿，你的这段代码不可行哦，原因主要有两个：

• Handlebars的内置if助手不支持else if或者else @index == 1这种语法结构，它的逻辑很简单：只能是if接单个条件，然后用else作为默认分支，没法在else后面直接加条件判断。
• 直接在if里写@index == 0也不符合Handlebars的语法规范——Handlebars的表达式不能直接使用==这类运算符，需要用专门的比较助手（比如内置的eq）或者自定义助手来实现值的比较。

下面给你几种可行的实现方式，按需选择：

方案一：嵌套if + 内置eq助手（适合简单场景） #

如果你的Handlebars版本在4.0及以上（支持子表达式），可以用内置的eq助手来做相等判断，再通过嵌套if模拟switch逻辑：

{{#each this}}
  {{#if (eq @index 0)}}
    <li><img src="/Content/totem/images/0.png" alt="" height="200" width="200" /></li>
  {{else}}
    {{#if (eq @index 1)}}
      <li><img src="/Content/totem/images/1.png" alt="" height="200" width="200" /></li>
    {{else}}
      <li><img src="/Content/totem/images/2.png" alt="" height="200" width="200" /></li>
    {{/if}}
  {{/if}}
{{/each}}

方案二：自定义switch-case助手（适合复杂多分支场景） #

如果你的项目允许自定义Handlebars助手，注册一个专门的switch助手会让代码更优雅，后续扩展分支也更方便：
先在JS里注册助手：

Handlebars.registerHelper('switch', function(value, options) {
  this.switchValue = value;
  this.switchCaseCount = 0;
  return options.fn(this);
});

Handlebars.registerHelper('case', function(value, options) {
  if (value === this.switchValue) {
    this.switchCaseCount++;
    return options.fn(this);
  }
});

Handlebars.registerHelper('default', function(options) {
  return this.switchCaseCount === 0 ? options.fn(this) : '';
});

然后在模板里这样使用：

{{#each this}}
  {{#switch @index}}
    {{#case 0}}
      <li><img src="/Content/totem/images/0.png" alt="" height="200" width="200" /></li>
    {{/case}}
    {{#case 1}}
      <li><img src="/Content/totem/images/1.png" alt="" height="200" width="200" /></li>
    {{/case}}
    {{#default}}
      <li><img src="/Content/totem/images/2.png" alt="" height="200" width="200" /></li>
    {{/default}}
  {{/switch}}
{{/each}}

方案三：极简拼接写法（适合文件名与索引匹配的场景） #

如果你的图片文件名刚好和循环的@index完全对应（比如索引0对应0.png，索引1对应1.png），那完全可以省去条件判断，直接拼接路径：

{{#each this}}
  <li><img src="/Content/totem/images/{{@index}}.png" alt="" height="200" width="200" /></li>
{{/each}}

这个方法最简洁，还能自动适配更多索引分支，简直是为你的场景量身定做的～

内容的提问来源于stack exchange，提问作者Lechucico