Vue.js Операторы цикла

В Vue операторы цикла в основном реализуются с помощью директивы v-for, которая используется для перебора массивов или объектов и создаёт соответствующее количество элементов.

Используйте директиву v-for на элементе, чтобы отображать элементы в цикле на основе исходного массива или объекта данных.

Перебор массива:

v-for="(item, index) in items"

Перебор объекта:

v-for="(value, key, index) in object"

  • Роль keyИспользование :v-forПри отрисовке списка необходимо указать уникальныйkeyатрибут, чтобы Vue мог распознавать уникальность каждого элемента и эффективно обновлять DOM.

  • Вложенные циклы: несколько циклов можно вложить друг в другаv-forдля отрисовки многомерных массивов или объектных структур.

v-for может привязывать данные к массиву для отображения списка:

Пример v-for

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.text }}
    </li>
  </ol>
</div>
<script>
const app = {
  data() {
    return {
      sites: [
        { text: 'Google' },
        { text: 'Example' },
        { text: 'Taobao' }
      ]
    }
  }
}

Vue.createApp(app).mount('#app')
</script>

Попробуйте сами »

v-for также поддерживает необязательный второй параметр, значение которого — индекс текущего элемента:

Пример v-for

index — это значение индекса элемента списка:

<div id="app">
  <ol>
    <li v-for="(site, index) in sites">
      {{ index }} -{{ site.text }}
    </li>
  </ol>
</div>
<script>
const app = {
  data() {
    return {
      sites: [
        { text: 'Google' },
        { text: 'Example' },
        { text: 'Taobao' }
      ]
    }
  }
}

Vue.createApp(app).mount('#app')
</script>

Попробуйте сами »

Использование v-for в элементе <template>:

v-for

<ul> <template v-for="site in sites"> <li>{{ site.text }}</li> <li>--------------</li> </template> </ul>

Попробуйте сами »

v-for: перебор объектов

v-for может перебирать данные через свойства объекта:

v-for

<div id="app"> <ul> <li v-for="value in object"> {{ value }} </li> </ul> </div> <script>const app = { data() { return { object: { name: 'Rookie Tutorial', url: 'http://www.example.com', slogan: 'Чему ты учишься — это не только технология, но и мечты!' } } } } Vue.createApp(app).mount('#app')</script>

Попробуйте сами »

Вы также можете указать второй параметр как имя ключа:

v-for

<div id="app"> <ul> <li v-for="(value, key) in object"> {{ key }} : {{ value }} </li> </ul> </div>

Попробуйте сами »

Третий параметр — это индекс:

v-for

<div id="app"> <ul> <li v-for="(value, key, index) in object"> {{ index }}. {{ key }} : {{ value }} </li> </ul> </div>

Попробуйте сами »

v-for Перебор целых чисел

v-for также может перебирать целые числа

v-for

<div id="app"> <ul> <li v-for="n in 10"> {{ n }} </li> </ul> </div>

Попробуйте сами »

Отображение отфильтрованных/отсортированных результатов

Мы можем обработать элементы массива перед их отображением. Обычно мы можем создать вычисляемое свойство, возвращающее отфильтрованный или отсортированный массив.

Пример v-for

Вывести чётные числа в массиве:

<div id="app"> <ul> <li v-for="n in evenNumbers">{{ n }}</li> </ul> </div>

Попробуйте сами »

Совместное использование v-for/v-if

В приведённом выше примере v-for/v-if используются совместно для установки значения по умолчанию для select:

Пример v-for/v-if

v-for выводит список, v-if устанавливает выбранное значение:

<div id="app"> <select @change="changeVal($event)" v-model="selOption"> <template v-for="(site,index) in sites" :site="site" :index="index" :key="site.id"> <!--Элемент с индексом 1 установлен как значение по умолчанию; значения индекса начинаются с 0.--> <option v-if = "index == 1" :value="site.name" selected>{{site.name}}</option> <option v-else :value="site.name">{{site.name}}</option> </template> </select> <div>Вы выбрали: {{selOption}}</div> </div> <script>const app = { data() { return { selOption: "Example", sites: [ {id:1,name:"Google"}, {id:2,name:"Example"}, {id:3,name:"Taobao"}, ] } }, methods:{ changeVal:function(event){ this.selOption = event.target.value; alert("you选Mediumalready"+this.selOption); } } } Vue.createApp(app).mount('#app')</script>

Попробуйте сами »

Использование v-for на компонентах

Если вы ещё не изучали компоненты, можете пропустить этот раздел.

В пользовательских компонентах можно использовать v-for так же, как и в любом обычном элементе:

<my-component v-for="item in items" :key="item.id"></my-component>

Однако данные не будут автоматически передаваться в компонент, потому что компонент имеет собственную независимую область видимости. Чтобы передать итерированные данные в компонент, нам нужно использовать props:

<my-component
  v-for="(item, index) in items"
  :item="item"
  :index="index"
  :key="item.id"
></my-component>

Причина, по которой item не внедряется в компонент автоматически, заключается в том, что это бы тесно связало компонент с работой v-for. Явное указание источника данных компонента позволяет повторно использовать компонент в других ситуациях.

Ниже приведён полный пример простого списка задач:

Пример

<div id="todo-list-example"> <form v-on:submit.prevent="addNewTodo"> <label for="new-todo">Добавить задачу</label> <input v-model="newTodoText" id="new-todo" placeholder="Например: покормите кота" /> <button>Add</button> </form> <ul> <todo-item v-for="(todo, index) in todos" :key="todo.id" :title="todo.title" @remove="todos.splice(index, 1)" ></todo-item> </ul> </div>

Попробуйте сами »
Другие расширения