Выпадающие списки
Элемент select позволяет создать список с возможностью одиночного и множественного выбора.
Выбор одного варианта из списка:
<select v-model="selected">
<option disabled value="">Выберите один из вариантов</option>
<option>А</option>
<option>Б</option>
<option>В</option>
</select>
<span>Выбрано: {{ selected }}</span>
new Vue({
el: '...',
data: {
selected: ''
}
})

Если начальное значение выражения
v-model
не соответствует ни одному из вариантов списка, элемент<select>
будет отображаться в «невыбранном» состоянии. В iOS это приведёт к тому, что пользователь не сможет выбрать первый элемент, потому что iOS не сгенерирует событие change в этом случае. Поэтому рекомендуется предоставлять отключённый вариант выбора с пустым значением value, как показано в примере выше.
Выбор нескольких вариантов из списка (с привязкой к массиву):
<select v-model="selected" multiple>
<option>А</option>
<option>Б</option>
<option>В</option>
</select>
<br>
<span>Выбрано: {{ selected }}</span>

Динамическое отображение списка опций с помощью v-for
:
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Выбрано: {{ selected }}</span>
new Vue({
el: '...',
data: {
selected: 'А',
options: [
{ text: 'Один', value: 'А' },
{ text: 'Два', value: 'Б' },
{ text: 'Три', value: 'В' }
]
}
})

Last updated
Was this helpful?