8000 simplified v-for with v-if examples · daniiell3/vuejs.org@d6c323f · GitHub
[go: up one dir, main page]
Skip to content

Commit d6c323f

Browse files
chrisvfritzchrisvfritz
committed
simplified v-for with v-if examples
1 parent 47065b8 commit d6c323f

File tree

2 files changed

+21
-81
lines changed

2 files changed

+21
-81
lines changed

‎src/v2/api/index.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1328,8 +1328,8 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
13281328
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.
13291329

13301330
This directive triggers transitions when its condition changes.
1331-
1332-
<p class="tip">When used together with v-if, v-for has a higher priority than v-if. Check the <a href="../guide/list.html#V-for-and-v-if">list rendering guide</a> for details.</p>
1331+
1332+
<p class="tip">When used together with v-if, v-for has a higher priority than v-if. See the <a href="../guide/list.html#v-for-with-v-if">list rendering guide</a> for details.</p>
13331333

13341334
- **See also:** [Conditional Rendering - v-if](../guide/conditional.html)
13351335

@@ -1413,9 +1413,9 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
14131413
{{ item.text }}
14141414
</div>
14151415
```
1416-
1417-
<p class="tip">When used together with v-if, v-for has a higher priority than v-if. Check the <a href="../guide/list.html#V-for-and-v-if">list rendering guide</a> for details.</p>
1418-
1416+
1417+
<p class="tip">When used together with v-if, v-for has a higher priority than v-if. See the <a href="../guide/list.html#v-for-with-v-if">list rendering guide</a> for details.</p>
1418+
14191419
The detailed usage for `v-for` is explained in the guide section linked below.
14201420

14211421
- **See also:**
@@ -1476,7 +1476,7 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
14761476

14771477
<!-- key modifier using keyCode -->
14781478
<input @keyup.13="onEnter">
1479-
1479+
14801480
<!-- the click event will be triggered at most once -->
14811481
<button v-on:click.once="doThis"></button>
14821482
```
@@ -1527,7 +1527,7 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
15271527

15281528
<!-- shorthand -->
15291529
<img :src="imageSrc">
1530-
1530+
15311531
<!-- with inline string concatenation -->
15321532
<img :src="'/path/to/images/' + fileName">
15331533

‎src/v2/guide/list.md

Lines changed: 14 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -329,88 +329,28 @@ new Vue({
329329
</script>
330330
{% endraw %}
331331

332-
### `v-for` and `v-if`
332+
### `v-for` with `v-if`
333333

334-
In Vue template, `v-for` has a higher priority than `v-if` when they exists in the same node.
334+
When they exists on the same node, `v-for` has a higher priority than `v-if`. That means the `v-if` will be run on each iteration of the loop separately. This is very useful when you want to render nodes for only _some_ items, like below:
335335

336-
Suppose the example code bellow:
337-
338-
```html
339-
<div id="v-for-if" class="demo">
340-
<div v-for="item in list" v-if="item"><div>{{ item }}</div></div>
341-
<div v-for="item2 in list2" v-else><div>{{ item2 }}</div></div>
342-
</div>
343-
```
344-
345-
```js
346-
new Vue({
347-
el: '#v-for-if',
348-
data: {
349-
list: [0, false, 1],
350-
list2: [4, 5, 6]
351-
}
352-
})
336+
``` html
337+
<li v-for="todo in todos" v-if="!todo.isComplete">
338+
{{ todo }}
339+
</li>
353340
```
354341

355-
Because `v-for` has higher priority than `v-if`, Vue will loop item in the list first. If item is true, it will output `item` value, else it will loop list2 and output the items of it.
356-
357-
So the result of the above example code will be:
358-
359-
{% raw %}
360-
<div id="v-for-if" class="demo">
361-
<div v-for="item in list" v-if="item"><div>{{ item }}</div></div>
362-
<div v-for="item2 in list2" v-else><div>{{ item2 }}</div></div>
363-
</div>
364-
<script>
365-
new Vue({
366-
el: '#v-for-if',
367-
data: {
368-
list: [0, false, 1],
369-
list2: [4, 5, 6]
370-
}
371-
})
372-
</script>
373-
{% endraw %}
374-
375-
Let's see a complicated example. This example shows the case that v-for, v-if, v-else-if and v-else used together.
342+
The above only renders the todos that are not complete.
376343

377-
```html
378-
<div id="v-for-if-complicated" class="demo">
379-
<div v-for="item in list" v-if="item"><div>{{ item }}</div></div>
380-
<div v-for="item2 in list2" v-else-if="item === false"><div>{{ item2 }}</div></div>
381-
<div v-else><div>else</div></div>
382-
</div>
383-
```
344+
If instead, your intent is to conditionally skip execution of the loop, you can place the `v-if` on a wrapper element (or [`<template>`](conditional.html#Conditional-Groups-with-v-if-on-lt-template-gt)). For example:
384345

385-
```js
386< 9E88 code>-
new Vue({
387-
el: '#v-for-if-complicated',
388-
data: {
389-
list: [0, false, 1],
390-
list2: [4, 5, 6]
391-
}
392-
})
346+
``` html
347+
<ul v-if="shouldRenderTodos">
348+
<li v-for="todo in todos">
349+
{{ todo }}
350+
</li>
351+
</ul>
393352
```
394353

395-
Result:
396-
397-
{% raw %}
398-
<div id="v-for-if-complicated" class="demo">
399-
<div v-for="item in list" v-if="item"><div>{{ item }}</div></div>
400-
<div v-for="item2 in list2" v-else-if="item === false"><div>{{ item2 }}</div></div>
401-
<div v-else><div>else</div></div>
402-
</div>
403-
<script>
404-
new Vue({
405-
el: '#v-for-if-complicated',
406-
data: {
407-
list: [0, false, 1],
408-
list2: [4, 5, 6]
409-
}
410-
})
411-
</script>
412-
{% endraw %}
413-
414354
## `key`
415355

416356
When Vue is updating a list of elements rendered with `v-for`, it by default uses an "in-place patch" strategy. If the order of the data items has changed, instead of moving the DOM elements to match the order of the items, Vue will simply patch each element in-place and make sure it reflects what should be rendered at that particular index. This is similar to the behavior of `track-by="$index"` in Vue 1.x.

0 commit comments

Comments
 (0)
0