8000 fix variable casing and code wrapping in list guide · ywwhack/vuejs.org@6daec67 · GitHub
[go: up one dir, main page]

Skip to content

Commit 6daec67

Browse files
committed
fix variable casing and code wrapping in list guide
1 parent 3732474 commit 6daec67

File tree

1 file changed

+20
-21
lines changed

1 file changed

+20
-21
lines changed

src/v2/guide/list.md

Lines changed: 20 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ You can also use `of` as the delimiter instead of `in`, so that it is closer to
112112
<div v-for="item of items"></div>
113113
```
114114

115-
### Template v-for
115+
### Template `v-for`
116116

117117
Similar to template `v-if`, you can also use a `<template>` tag with `v-for` to render a block of multiple elements. For example:
118118

@@ -125,7 +125,7 @@ Similar to template `v-if`, you can also use a `<template>` tag with `v-for` to
125125
</ul>
126126
```
127127

128-
### Object v-for
128+
### Object `v-for`
129129

130130
You can also use `v-for` to iterate through the properties of an object.
131131

@@ -142,9 +142,9 @@ new Vue({
142142
el: '#repeat-object',
143143
data: {
144144
object: {
145-
FirstName: 'John',
146-
LastName: 'Doe',
147-
Age: 30
145+
firstName: 'John',
146+
lastName: 'Doe',
147+
age: 30
148148
}
149149
}
150150
})
@@ -163,9 +163,9 @@ new Vue({
163163
el: '#repeat-object',
164164
data: {
165165
object: {
166-
FirstName: 'John',
167-
LastName: 'Doe',
168-
Age: 30
166+
firstName: 'John',
167+
lastName: 'Doe',
168+
age: 30
169169
}
170170
}
171171
})
@@ -329,11 +329,11 @@ new Vue({
329329
</script>
330330
{% endraw %}
331331

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

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.
335335

336-
Suppose the example code bellow:
336+
Suppose the example code bellow:
337337

338338
```html
339339
<div id="v-for-if" class="demo">
@@ -347,16 +347,15 @@ new Vue({
347347
el: '#v-for-if',
348348
data: {
349349
list: [0, false, 1],
350-
list2: [4, 5, 6]
350+
list2: [4, 5, 6]
351351
}
352352
})
353353
```
354354

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.
357356

358357
So the result of the above example code will be:
359-
358+
360359
{% raw %}
361360
<div id="v-for-if" class="demo">
362361
<div v-for="item in list" v-if="item"><div>{{ item }}</div></div>
@@ -367,11 +366,11 @@ new Vue({
367366
el: '#v-for-if',
368367
data: {
369368
list: [0, false, 1],
370-
list2: [4, 5, 6]
369+
list2: [4, 5, 6]
371370
}
372371
})
373372
</script>
374-
{% endraw %}
373+
{% endraw %}
375374

376375
Let's see a complicated example. This example shows the case that v-for, v-if, v-else-if and v-else used together.
377376

@@ -388,13 +387,13 @@ new Vue({
388387
el: '#v-for-if-complicated',
389388
data: {
390389
list: [0, false, 1],
391-
list2: [4, 5, 6]
390+
list2: [4, 5, 6]
392391
}
393392
})
394393
```
395394

396395
Result:
397-
396+
398397
{% raw %}
399398
<div id="v-for-if-complicated" class="demo">
400399
<div v-for="item in list" v-if="item"><div>{{ item }}</div></div>
@@ -406,11 +405,11 @@ new Vue({
406405
el: '#v-for-if-complicated',
407406
data: {
408407
list: [0, false, 1],
409-
list2: [4, 5, 6]
408+
list2: [4, 5, 6]
410409
}
411410
})
412411
</script>
413-
{% endraw %}
412+
{% endraw %}
414413

415414
## Key
416415

0 commit comments

Comments
 (0)
0