当前位置: > > > Template7 - 表达式介绍1(if、else、unless)

Template7 - 表达式介绍1(if、else、unless)

Template7 提供了丰富的表达式语法(Expressions syntax)供我们使用,本文介绍其中的 {{#if}}...{{else}}...{{/if}}{{#unless}}...{{else}}...{{/unless}} 这2个表达式。

一、{{#if}}...{{else}}...{{/if}}
{{#if}} 判断数据是否不是 false(或者不为 "undefined" 或 "null" 或"" 或"0")。不是 false 的话则走 {{#if}},否则走 {{else}} 分支。
1,单独使用if
(1)假设上下文数据
{
  active: true,
  title: 'Link',
}
(2)模板样例
<a href="#" {{#if active}}class="active"{{/if}}>{{title}}</a> 
(3)输出结果
<a href="#" class="active">Link</a>

2,if与else配合使用
(1)假设上下文数据
{
  name: 'John Doe',
  hobby: false
}
(2)模板样例
<p>Hello, my name is {{name}}.</p>
{{#if hobby}}
<p>I have hobby</p>
{{else}}
<p>I don't have hobby</p>
{{/if}} 
(3)输出结果
<p>Hello, my name is John Doe.</p>
<p>I don't have hobby</p>

二、{{#unless}}...{{else}}...{{/unless}}
{{#unless}} 同上面的 {{#if}} 表达式正好相反。判断数据是不是 false(或者是 "undefined" 或 "null" 或"" 或"0")。是 false 的话则走 {{#unless}},否则走 {{else}} 分支。
1,单独使用unless
(1)假设上下文数据
{
  active: true,
  title: 'Link',
}
(2)模板样例
<a href="#" {{#unless active}}class="active"{{/unless}}>{{title}}</a>
(3)输出结果
<a href="#">Link</a>

2,unless与else配合使用
(1)假设上下文数据
{
  name: 'John Doe',
  hobby: false
}
(2)模板样例
<p>Hello, my name is {{name}}.</p>
{{#unless hobby}}
<p>I have hobby</p>
{{else}}
<p>I don't have hobby</p>
{{/unless}}   
(3)输出结果
<p>Hello, my name is John Doe.</p>
<p>I have hobby</p>

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作。

打赏支持
评论0