一、{{#each}}...{{else}}...{{/each}} {{#each}} 是一块表达式，可以用来遍历数组里的元素，或者一个对象中属性。

{
  people : ['John Doe', 'Mark Johnson']
} 

（2）模板样例

<ul>
  {{#each people}}
  <li>{{@index}}. {{this}}</li>
  {{/each}}    
</ul>    

（3）输出结果

<ul>
  <li>0. John Doe</li>
  <li>1. Mark Johnson</li>
</ul> 

2，遍历内部是对象的数组

{
  people : [
    {
      firstName: 'John',
      lastName: 'Doe'
    },
    {
      firstName: 'Mark',
      lastName: 'Johnson'
    },
  ]
} 

（2）模板样例

<ul>
  {{#each people}}
  <li>{{firstName}} {{lastName}}</li>
  {{/each}}    
</ul>       

（3）输出结果

<ul>
  <li>John Doe</li>
  <li>Mark Johnson</li>
</ul> 

3，遍历对象属性

{
  props: {
    power: '150 hp',
    speed: '200 km/h',
  }
}

（2）模板样例

<ul>
  {{#each props}}
  <li>{{@key}}: {{this}}</li>
  {{/each}}
</ul>   

（3）输出结果

<ul>
  <li>power: 150 hp</li>
  <li>speed: 200 kn/h</li>
</ul> 

4，{{else}}分支
当没有遍历到任何数据的时候会显示这里面的内容。

{
  props: null
}  

（2）模板样例

<ul>
  {{#each props}}
  <li>{{@key}}: {{this}}</li>
  {{else}}
  <li>没有属性</li>
  {{/each}}
</ul>   

（3）输出结果

<ul>
  <li>没有属性</li>
</ul>

二、{{#with}}...{{/with}}
通过传递的上下文改变渲染上下文。

{
  props: {
    power: '150 hp',
    speed: '200 km/h',
  }
} 

（2）模板样例

{{#with props}}
<p>Car has {{power}} power and {{speed}} maximum speed</p>
{{/with}}   

（3）输出结果

<p>Car has 150 hp power and 200 km/h maximum speed</p>

三、{{#variableName}}...{{/variableName}}
这个是用来简化上面的 {{#each}} 与 {{#with}} 表达式的。

1，如果是数组，则相当于{{#each}}表达式

{
  people: [
    {
      name: 'John Doe',
      age: 18
    },
    {
      name: 'Mark Johnson',
      age: 21
    }
  ]  
}

（2）模板样例

<ul>
  {{#people}}
  <li>{{name}} - {{age}} years old</li>
  {{/people}}
</ul>    

（3）输出结果

<ul>
  <li>John Doe - 18 years old</li>
  <li>Mark Johnson - 21 years old</li>
</ul>

2，如果是对象，则相当于{{#with}}表达式

{
  props: {
    power: '150 hp',
    speed: '200 km/h',
  }
}

（2）模板样例

{{#props}}
<p>Car has {{power}} power and {{speed}} maximum speed</p>
{{/props}}   

（3）输出结果

<p>Car has 150 hp power and 200 km/h maximum speed</p>