v-else-if

yyx990803 · yyx990803 · commit cc875c091cfe · 2016-11-21T16:57:38.000-05:00
diff --git a/src/v2/api/index.md b/src/v2/api/index.md
@@ -1302,39 +1302,39 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
   ```
 - **See also:** [Data Binding Syntax - interpolations](../guide/syntax.html#Raw-HTML)
 
-### v-if
+### v-show
 
 - **Expects:** `any`
 
 - **Usage:**
 
-  Conditionally render the element based on the truthy-ness of the expression value. The element and its contained directives / components are destroyed and re-constructed during toggles. If the element is a `<template>` element, its content will be extracted as the conditional block.
+  Toggle's the element's `display` CSS property based on the truthy-ness of the expression value.
 
   This directive triggers transitions when its condition changes.
 
-- **See also:** [Conditional Rendering - v-if](../guide/conditional.html)
+- **See also:** [Conditional Rendering - v-show](../guide/conditional.html#v-show)
 
-### v-show
+### v-if
 
 - **Expects:** `any`
 
 - **Usage:**
 
-  Toggle's the element's `display` CSS property based on the truthy-ness of the expression value.
+  Conditionally render the element based on the truthy-ness of the expression value. The element and its contained directives / components are destroyed and re-constructed during toggles. If the element is a `<template>` element, its content will be extracted as the conditional block.
 
   This directive triggers transitions when its condition changes.
 
-- **See also:** [Conditional Rendering - v-show](../guide/conditional.html#v-show)
+- **See also:** [Conditional Rendering - v-if](../guide/conditional.html)
 
 ### v-else
 
 - **Does not expect expression**
 
-- **Restriction:** previous sibling element must have `v-if`.
+- **Restriction:** previous sibling element must have `v-if` or `v-else-if`.
 
 - **Usage:**
 
-  Denote the "else block" for `v-if`.
+  Denote the "else block" for `v-if` or a `v-if`/`v-else-if` chain.
 
   ```html
   <div v-if="Math.random() > 0.5">
@@ -1348,6 +1348,35 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
 - **See also:**
   - [Conditional Rendering - v-else](../guide/conditional.html#v-else)
 
+### v-else-if
+
+> New in 2.1.0
+
+- **Expects:** `any`
+
+- **Restriction:** previous sibling element must have `v-if` or `v-else-if`.
+
+- **Usage:**
+
+  Denote the "else if block" for `v-if`. Can be chained.
+
+  ```html
+  <div v-if="type === 'A'">
+    A
+  </div>
+  <div v-else-if="type === 'B'">
+    B
+  </div>
+  <div v-else-if="type === 'C'">
+    C
+  </div>
+  <div v-else>
+    Not A/B/C
+  </div>
+  ```
+
+- **See also:** [Conditional Rendering - v-else-if](../guide/conditional.html#v-else-if)
+
 ### v-for
 
 - **Expects:** `Array | Object | number | string`
diff --git a/src/v2/guide/conditional.md b/src/v2/guide/conditional.md
@@ -53,7 +53,30 @@ You can use the `v-else` directive to indicate an "else block" for `v-if`:
 </div>
 ```
 
-The `v-else` element must immediately follow the `v-if` element - otherwise it will not be recognized.
+A `v-else` element must immediately follow a `v-if` or a `v-else-if` element - otherwise it will not be recognized.
+
+### v-else-if
+
+> New in 2.1.0
+
+The `v-else-if`, as the name suggests, serves as an "else if block" for `v-if`. It can also be chained multiple times:
+
+```html
+<div v-if="type === 'A'">
+  A
+</div>
+<div v-else-if="type === 'B'">
+  B
+</div>
+<div v-else-if="type === 'C'">
+  C
+</div>
+<div v-else>
+  Not A/B/C
+</div>
+```
+
+Similar to `v-else`, a `v-else-if` element must immediately follow a `v-if` or a `v-else-if` element.
 
 ## v-show
 
