You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/v2/guide/list.md
+20-21Lines changed: 20 additions & 21 deletions
Original file line number
Diff line number
Diff line change
@@ -112,7 +112,7 @@ You can also use `of` as the delimiter instead of `in`, so that it is closer to
112
112
<divv-for="item of items"></div>
113
113
```
114
114
115
-
### Template v-for
115
+
### Template `v-for`
116
116
117
117
Similar to template `v-if`, you can also use a `<template>` tag with `v-for` to render a block of multiple elements. For example:
118
118
@@ -125,7 +125,7 @@ Similar to template `v-if`, you can also use a `<template>` tag with `v-for` to
125
125
</ul>
126
126
```
127
127
128
-
### Object v-for
128
+
### Object `v-for`
129
129
130
130
You can also use `v-for` to iterate through the properties of an object.
131
131
@@ -142,9 +142,9 @@ new Vue({
142
142
el:'#repeat-object',
143
143
data: {
144
144
object: {
145
-
FirstName:'John',
146
-
LastName:'Doe',
147
-
Age:30
145
+
firstName:'John',
146
+
lastName:'Doe',
147
+
age:30
148
148
}
149
149
}
150
150
})
@@ -163,9 +163,9 @@ new Vue({
163
163
el:'#repeat-object',
164
164
data: {
165
165
object: {
166
-
FirstName:'John',
167
-
LastName:'Doe',
168
-
Age:30
166
+
firstName:'John',
167
+
lastName:'Doe',
168
+
age:30
169
169
}
170
170
}
171
171
})
@@ -329,11 +329,11 @@ new Vue({
329
329
</script>
330
330
{% endraw %}
331
331
332
-
### V-for and v-if
332
+
### `v-for` and `v-if`
333
333
334
-
In Vue.js template, v-for has a higher priority than v-if when they exists in the same node.
334
+
In Vue.js template, `v-for` has a higher priority than `v-if` when they exists in the same node.
335
335
336
-
Suppose the example code bellow:
336
+
Suppose the example code bellow:
337
337
338
338
```html
339
339
<divid="v-for-if"class="demo">
@@ -347,16 +347,15 @@ new Vue({
347
347
el:'#v-for-if',
348
348
data: {
349
349
list: [0, false, 1],
350
-
list2: [4, 5, 6]
350
+
list2: [4, 5, 6]
351
351
}
352
352
})
353
353
```
354
354
355
-
356
-
Because v-for has higher priority than v-if, Vue.js 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.
355
+
Because `v-for` has higher priority than `v-if`, Vue.js 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.
357
356
358
357
So the result of the above example code will be:
359
-
358
+
360
359
{% raw %}
361
360
<divid="v-for-if"class="demo">
362
361
<divv-for="item in list"v-if="item"><div>{{ item }}</div></div>
@@ -367,11 +366,11 @@ new Vue({
367
366
el:'#v-for-if',
368
367
data: {
369
368
list: [0, false, 1],
370
-
list2: [4, 5, 6]
369
+
list2: [4, 5, 6]
371
370
}
372
371
})
373
372
</script>
374
-
{% endraw %}
373
+
{% endraw %}
375
374
376
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.
377
376
@@ -388,13 +387,13 @@ new Vue({
388
387
el:'#v-for-if-complicated',
389
388
data: {
390
389
list: [0, false, 1],
391
-
list2: [4, 5, 6]
390
+
list2: [4, 5, 6]
392
391
}
393
392
})
394
393
```
395
394
396
395
Result:
397
-
396
+
398
397
{% raw %}
399
398
<divid="v-for-if-complicated"class="demo">
400
399
<divv-for="item in list"v-if="item"><div>{{ item }}</div></div>
0 commit comments