index.md (#24973)
Loops translated. Added 'Accessing current index in loops' translation.
This commit is contained in:
@ -62,9 +62,9 @@ let app = new Vue({
|
|||||||
|
|
||||||
Vue.js также имеет директиву `v-else-if` .
|
Vue.js также имеет директиву `v-else-if` .
|
||||||
|
|
||||||
### Loops
|
### Циклы
|
||||||
|
|
||||||
Vue.js также помогает в создании нескольких копий одного и того же кода структура с петлями. Классический пример - это динамически отображаемый список.
|
Vue.js так же помогает с созданием множества копий элементов с помощью директивы 'v-for'. Классический пример - динамическая отрисовка списка.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
|
|
||||||
@ -91,10 +91,25 @@ let app = new Vue({
|
|||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
Путь проще, чем вставка большого количества `<li>` . И обратите внимание, что всякий раз, когда `list` изменения, результат будет соответствующим образом изменяться. Попробуйте: откройте консоль и `push` строку в `list` с помощью
|
Гораздо проще чем копирование большого количества '<li>'. Обратите внимание, что всякий раз, когда массив 'list' изменяется, результат изменяется соответствующим образом. Пропробуйте открыть консоль и добавить новую строку в массив 'items'.
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
app.list.push("something else");
|
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', чтобы стилизовать первый, последний или четный/нечетный элемент списка по разному, а так же добавить дополнительную логику к нашему компоненту.
|
||||||
|
Reference in New Issue
Block a user