Skip to content

Commit

Permalink
translation: tutorial/if.md (#71)
Browse files Browse the repository at this point in the history
  • Loading branch information
harttle authored and otakustay committed Oct 30, 2018
1 parent 13477e3 commit ce9a7b0
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 13 deletions.
24 changes: 12 additions & 12 deletions source/_posts/en/tutorial/if.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: 条件
title: Conditional Rendering
categories:
- tutorial
---
Expand All @@ -8,43 +8,43 @@ categories:
s-if
------

通过 **s-if** 指令,我们可以为元素指定条件。当条件成立时元素可见,当条件不成立时元素不存在。
**s-if** directive can be used for conditional rendering. The element will be rendered if and only if the condition evaluates to true.

`提示`:当不满足条件时,San 会将元素从当前页面中移除,而不是隐藏。
`Note`: The element will be removed rather than hidden when the condition is not satisfied.

```html
<span s-if="isOK">Hello San!</span>
```

**s-if** 指令的值可以是任何类型的[表达式](../template/#表达式)
The **s-if** directive can contain any type of [expression](../template/#Expression).

```html
<span s-if="isReady && isActive">Hello San!</span>
```

`提示`:San 的条件判断不是严格的 === false。所以,一切 JavaScript 的假值都会认为条件不成立:0、空字符串、nullundefined、NaN等。
`Note`:All JavaScript falsy values are considered false: 0, empty string, null, undefined, NaN, etc.

s-elif
------

`> 3.2.3`

**s-elif** 指令可以给 **s-if** 增加一个额外条件分支块。**s-elif** 指令的值可以是任何类型的[表达式](../template/#表达式)
**s-elif** directive can be used to add a condition branch for **s-if**. The **s-elif** directive can contain any type of [expression](../template/#Expression).

```html
<span s-if="isActive">Active</span>
<span s-elif="isOnline">Pending</span>
```

`提示`**s-elif** 指令元素必须跟在 **s-if** **s-elif** 指令元素后,否则将抛出 **elif not match if** 的异常。
`Note`**s-elif** element must immediately follow a **s-if** or **s-elif** element. An **elif not match if** exception will be thrown if used otherwise.


s-else-if
------

`> 3.5.6`

**s-else-if** 指令是 **s-elif** 指令的别名,效果相同。
**s-else-if** directive is an alias for **s-elif** directive, they're effectively the same.

```html
<span s-if="isActive">Active</span>
Expand All @@ -55,20 +55,20 @@ s-else-if
s-else
------

**s-else** 指令可以给 **s-if** 增加一个不满足条件的分支块。**s-else** 指令没有值。
**s-else** directive can be used to specify a condition-not-satisfied branch for **s-if**. **s-else** have no value.

```html
<span s-if="isOnline">Hello!</span>
<span s-else>Offline</span>
```

`提示`**s-else** 指令元素必须跟在 **s-if** **s-elif** 指令元素后,否则将抛出 **else not match if** 的异常。
`Note`**s-else** element must immediately follow a **s-if** or **s-elif** element. An **else not match if** exception will be thrown if used otherwise.


虚拟元素
Virtual Element
------

san 中,template 元素在渲染时不会包含自身,只会渲染其内容。对 template 元素应用 if 指令能够让多个元素同时根据条件渲染视图,可以省掉一层不必要的父元素。
In san templates, only contents of **template** are rendered, NOT including the **template** element itself. By applying an **if** directive for **template** element, multiple elements (without a redundant parent element) can be rendered regarding to the **if** condition.

```html
<div>
Expand Down
2 changes: 1 addition & 1 deletion source/_posts/tutorial/if.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ categories:
s-if
------

通过 **s-if** 指令,我们可以为元素指定条件。当条件成立时元素可见,当条件不成立时元素不存在。
通过 **s-if** 指令,我们可以为元素指定条件。当条件成立时元素存在,当条件不成立时元素不存在。

`提示`:当不满足条件时,San 会将元素从当前页面中移除,而不是隐藏。

Expand Down

0 comments on commit ce9a7b0

Please sign in to comment.