index.md (#24973)
Loops translated. Added 'Accessing current index in loops' translation.pull/21122/head^2
parent
23c5c1baf4
commit
ce73ea9c15
|
@ -62,9 +62,9 @@ let app = new Vue({
|
|||
|
||||
Vue.js также имеет директиву `v-else-if` .
|
||||
|
||||
### Loops
|
||||
### Циклы
|
||||
|
||||
Vue.js также помогает в создании нескольких копий одного и того же кода структура с петлями. Классический пример - это динамически отображаемый список.
|
||||
Vue.js так же помогает с созданием множества копий элементов с помощью директивы 'v-for'. Классический пример - динамическая отрисовка списка.
|
||||
|
||||
```html
|
||||
|
||||
|
@ -91,10 +91,25 @@ let app = new Vue({
|
|||
});
|
||||
```
|
||||
|
||||
Путь проще, чем вставка большого количества `<li>` . И обратите внимание, что всякий раз, когда `list` изменения, результат будет соответствующим образом изменяться. Попробуйте: откройте консоль и `push` строку в `list` с помощью
|
||||
Гораздо проще чем копирование большого количества '<li>'. Обратите внимание, что всякий раз, когда массив 'list' изменяется, результат изменяется соответствующим образом. Пропробуйте открыть консоль и добавить новую строку в массив 'items'.
|
||||
|
||||
```javascript
|
||||
app.list.push("something else");
|
||||
```
|
||||
|
||||
Как и ожидалось, страница, представленная сейчас, имеет наш новый товар!
|
||||
Как и ожидалось, на странице появится новый элемент!
|
||||
|
||||
### Получение доступа к итератору
|
||||
|
||||
`v-for` так же поддерживает второй аргумент(опционально). Этот аргумент является порядковым номером элемента в массиве 'items':
|
||||
|
||||
```html
|
||||
<div id="app">
|
||||
<ul>
|
||||
<li v-for="(item, index) in items">
|
||||
{{ index }}: {{ item }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
```
|
||||
Таким образом мы можем использовать 'index', чтобы стилизовать первый, последний или четный/нечетный элемент списка по разному, а так же добавить дополнительную логику к нашему компоненту.
|
||||
|
|
Loading…
Reference in New Issue