Loops translated. Added 'Accessing current index in loops' translation.
pull/21122/head^2
Grigory 2018-11-06 02:02:54 +08:00 committed by Gregory Gubarev
parent 23c5c1baf4
commit ce73ea9c15
1 changed files with 19 additions and 4 deletions

View File

@ -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', чтобы стилизовать первый, последний или четный/нечетный элемент списка по разному, а так же добавить дополнительную логику к нашему компоненту.