Массивы в Vue

Для упрощения работы с массивами во Vue для каждого объекта массива определено ряд методов, с помощью которых можно управлять его элементами. Все перечисленные ниже методы, по сути являются обертками над одноименными стандартными методами javascript для управления массивами и работают точно также. Главное их отличие от стандартных методов JavaScript состоит в том, что эти методы-обертки информируют систему Vue о том, что с массивом были произведены некоторые действия, и соответственно для этого массива может быть произведен повторный рендеринг на веб-странице:

push() добавляет один или несколько элементов в конец массива и возвращает новую длину массива
pop() удаляет последний элемент из массива и возвращает его, при этом длина массива уменьшается на 1
shift() удаляет первый элемент из массива и возвращает его, при этом длина массива уменьшается на 1
unshift() добавляет неограниченное количество новых элементов в начало массива. При этом исходный массив изменяется, а результатом возвращается новая длина массива
splice() удаляет или добавляет элементы в массив. Можно только удалять элементы, только добавлять или делать и то и другое одновременно
sort() производит сортировку массива в лексикографическом порядке и возвращает уже измененный массив
reverse() позволяет обратить порядок элементов в массиве: первый элемент становится последним, а последний первым

Кроме выше описанных методов, которые изменяют отдельные элементы массив, есть ряд методов из javascript, которые возвращают новый массив:

filter()
concat()
slice()

Результат таких функций лучше привязывать к вычисляемому свойству, которое позволит произвести повторный рендеринг элементов веб-страницы.

Работа с массивами

Вывод содержимого массивов во Vue осуществляется так же, как и в чистом JavaScript. Давайте посмотрим, как это делается. Пусть в data у нас есть свойство arr, которое содержит внутри себя некоторый массив:

App.vuedata()
{
    return {
        arr: [1, 2, 3],
    }
}

Давайте выведем элементы этого массива:

App.vue<template>
    {{ arr[0] }}
    {{ arr[1] }}
    {{ arr[2] }}
</template>