Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit cc875c0

Browse files
v-else-if
1 parent 5034b0f commit cc875c0

File tree

2 files changed

+61
-9
lines changed

2 files changed

+61
-9
lines changed

‎src/v2/api/index.md‎

Lines changed: 37 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1302,39 +1302,39 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
13021302
```
13031303
- **See also:** [Data Binding Syntax - interpolations](../guide/syntax.html#Raw-HTML)
13041304

1305-
### v-if
1305+
### v-show
13061306

13071307
- **Expects:** `any`
13081308

13091309
- **Usage:**
13101310

1311-
Conditionally render the elementbased 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.
1311+
Toggle's the element's `display` CSS property based on the truthy-ness of the expression value.
13121312

13131313
This directive triggers transitions when its condition changes.
13141314

1315-
- **See also:** [Conditional Rendering - v-if](../guide/conditional.html)
1315+
- **See also:** [Conditional Rendering - v-show](../guide/conditional.html#v-show)
13161316

1317-
### v-show
1317+
### v-if
13181318

13191319
- **Expects:** `any`
13201320

13211321
- **Usage:**
13221322

1323-
Toggle's the element's `display` CSS property based on the truthy-ness of the expression value.
1323+
Conditionally render the elementbased 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.
13241324

13251325
This directive triggers transitions when its condition changes.
13261326

1327-
- **See also:** [Conditional Rendering - v-show](../guide/conditional.html#v-show)
1327+
- **See also:** [Conditional Rendering - v-if](../guide/conditional.html)
13281328

13291329
### v-else
13301330

13311331
- **Does not expect expression**
13321332

1333-
- **Restriction:** previous sibling element must have `v-if`.
1333+
- **Restriction:** previous sibling element must have `v-if` or `v-else-if`.
13341334

13351335
- **Usage:**
13361336

1337-
Denote the "else block" for `v-if`.
1337+
Denote the "else block" for `v-if` or a `v-if`/`v-else-if` chain.
13381338

13391339
```html
13401340
<div v-if="Math.random() > 0.5">
@@ -1348,6 +1348,35 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
13481348
- **See also:**
13491349
- [Conditional Rendering - v-else](../guide/conditional.html#v-else)
13501350

1351+
### v-else-if
1352+
1353+
> New in 2.1.0
1354+
1355+
- **Expects:** `any`
1356+
1357+
- **Restriction:** previous sibling element must have `v-if` or `v-else-if`.
1358+
1359+
- **Usage:**
1360+
1361+
Denote the "else if block" for `v-if`. Can be chained.
1362+
1363+
```html
1364+
<div v-if="type === 'A'">
1365+
A
1366+
</div>
1367+
<div v-else-if="type === 'B'">
1368+
B
1369+
</div>
1370+
<div v-else-if="type === 'C'">
1371+
C
1372+
</div>
1373+
<div v-else>
1374+
Not A/B/C
1375+
</div>
1376+
```
1377+
1378+
- **See also:** [Conditional Rendering - v-else-if](../guide/conditional.html#v-else-if)
1379+
13511380
### v-for
13521381

13531382
- **Expects:** `Array | Object | number | string`

‎src/v2/guide/conditional.md‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,30 @@ You can use the `v-else` directive to indicate an "else block" for `v-if`:
5353
</div>
5454
```
5555

56-
The `v-else` element must immediately follow the `v-if` element - otherwise it will not be recognized.
56+
A `v-else` element must immediately follow a `v-if` or a `v-else-if` element - otherwise it will not be recognized.
57+
58+
### v-else-if
59+
60+
> New in 2.1.0
61+
62+
The `v-else-if`, as the name suggests, serves as an "else if block" for `v-if`. It can also be chained multiple times:
63+
64+
```html
65+
<div v-if="type === 'A'">
66+
A
67+
</div>
68+
<div v-else-if="type === 'B'">
69+
B
70+
</div>
71+
<div v-else-if="type === 'C'">
72+
C
73+
</div>
74+
<div v-else>
75+
Not A/B/C
76+
</div>
77+
```
78+
79+
Similar to `v-else`, a `v-else-if` element must immediately follow a `v-if` or a `v-else-if` element.
5780

5881
## v-show
5982

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /