Сейчас мы с вами научимся работе с инпутами в фреймворке Vue. С их помощью мы будем реактивно добавлять данные на страницу. Давайте приступим.
Пусть у нас есть инпут:
<div id="app">
<input>
</div>
Пусть также у нас есть свойство message:
let app = new Vue({
el: '#app',
data: {
message: 'hello',
},
});
Мы можем связать это свойство и инпут таким образом, чтобы изменение любого из них приводило к изменению другого.
Это делается с помощью директивы v-model, в которой указывается свойство, привязанное к инпуту.
Давайте привяжем к нашему инпуту свойство message:
<div id="app">
<input v-model="message">
</div>
Давайте запустим (запустите):
let app = new Vue({
el: '#app',
data: {
message: 'hello',
},
});
<div id="app">
<input v-model="message">
</div>
После запуска в инпуте будет стоять текст свойства message (его текст 'hello').
А вот если поредактировать данные в инпуте - свойство message также изменится соответствующим образом. Чтобы увидеть это, давайте выведем введенное в инпут содержимое где-нибудь в абзаце:
<div id="app">
<input v-model="message">
<p>Введенное сообщение: {{ message }}</p>
</div>
Сразу после запуска и в инпуте, и в абзаце будет стоять текст 'hello'. Если же начать редактировать данные в инпуте - вы увидите, как они одновременно меняются в абзаце под ним.
Давайте убедимся в этом - соберем все вместе и запустим:
let app = new Vue({
el: '#app',
data: {
message: 'hello',
},
});
<div id="app">
<input v-model="message">
<p>Введенное сообщение: {{ message }}</p>
</div>
Дан инпут. Сделайте так, чтобы вводимый в инпут текст сразу выводился в абзаце под ним.
Изначально пустой инпут
Пусть вы хотите, чтобы изначально инпут был пустым. Для этого в data для свойства message значением поставим пустые кавычки:
let app = new Vue({
el: '#app',
data: {
message: '',
},
});
Это обязательный шаг - если к инпуту привязано свойство, оно обязательно должно быть определено в data (пусть и будет пустым), иначе все будет работать некорректно.
Действие по кнопке
Пусть у нас есть кнопка и инпут, в который вводится число. Давайте по нажатию на кнопку выведем квадрат введенного в инпут числа.
Приступим к реализации.
Давайте для начала сделаем инпут, привяжем к нему свойство num, сделаем кнопку, по клику на которую будет выполнятся метод calc, и сделаем также абзац, в который будет выводится результат (пусть результат будет в свойстве result):
<div id="app">
<p>Результат: {{ result }}</p>
<input v-model="num">
<button v-on:click="calc">Посчитать</button>
</div>
Давайте напишем реализацию метода calc. Внутри него свойство num будет доступно как this.num. Для возведения в квадрат перемножим this.num само на себя, а результат запишем в this.result:
methods: {
calc: function() {
this.result = this.num * this.num;
}
}
Получится, что как только будет вызван метод calc (а это случится по нажатию на кнопку), в свойство result запишется результат и при этом одновременно выведется в нашем абзаце.
Давайте соберем все вместе и запустим:
let app = new Vue({
el: '#app',
data: {
num: null, // изначально числа нет
result: 0,
},
methods: {
calc: function() {
this.result = this.num * this.num;
}
}
});
<div id="app">
<p>Результат: {{ result }}</p>
<input v-model="num">
<button v-on:click="calc">Посчитать</button>
</div>
Дан инпут. Дана кнопка. Дан абзац. В инпут вводится число. Сделайте так, чтобы по нажатию на кнопку абзаце появился квадратный корень этого числа.
Даны два инпута. Дана кнопка. Дан абзац. В каждый инпут вводятся числа. Сделайте так, чтобы по нажатию на кнопку в абзаце появилась сумма этих чисел.
Даны два инпута. Дана кнопка. В каждый инпут вводится какой-то текст. Сделайте так, чтобы по нажатию на кнопку текст первого инпута стал во втором и наоборот.
Дан инпут, 3 абзаца и кнопка. В инпут вводится ФИО пользователя через пробел. Сделайте так, чтобы по нажатию на кнопку в первом абзаце появилась фамилия пользователя, во втором - имя, а в третьем - отчество.
Из инпута в массив
Пусть у нас в items хранится массив:
let app = new Vue({
el: '#app',
data: {
items: ['a', 'b', 'c', 'd', 'e'],
},
});
И его содержимое выводится на экран в виде списка:
<div id="app">
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
</div>
Давайте теперь сделаем инпут и кнопку, по нажатию на которую текст инпута добавится в конец списка в качестве нового пункта:
<div id="app">
<input v-model="newItem">
<button v-on:click="addItem">Добавить</button>
</div>
Для корректной работы инпута добавим в data свойство newItem:
let app = new Vue({
el: '#app',
data: {
newItem: '', // начальное значение инпута
items: ['a', 'b', 'c', 'd', 'e'],
},
});
По нажатию на кнопку будет вызываться метод addItem, который будет добавлять новый элемент в массив items. Текст элемента будет браться из инпута, то есть из this.newItem:
methods: {
addItem: function() {
this.items.push(this.newItem);
}
}
Давайте соберем все вместе и запустим:
let app = new Vue({
el: '#app',
data: {
newItem: '',
items: ['a', 'b', 'c', 'd', 'e'],
},
methods: {
addItem: function() {
this.items.push(this.newItem);
}
}
});
<div id="app">
<input v-model="newItem">
<button v-on:click="addItem">Добавить</button>
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
</div>
Запустите код, введите текст в инпут, нажмите на кнопку - и вы увидите, как текст из инпута добавится в конец нашего списка.
Дан массив. Дан инпут. Дана кнопка. Выведите элементы этого массива в виде списка ul. Сделайте так, чтобы по нажатию на кнопку в конец списка добавился текст из инпута.
Модифицируйте предыдущую задачу так, чтобы новый пункт добавлялся в начало списка.
Модифицируйте предыдущую задачу так, чтобы в конце каждой li появилась кнопка для удаления этого пункта списка.