В Vue.js, связывание данных - это процесс, который позволяет связать данные в JavaScript-объекте с элементами DOM. Одним из основных способов связывания данных является использование директивы v-model, которая позволяет связать переменную с полем ввода и автоматически обновлять значения обоих при их изменении.
Приведу пример, как можно забиндить поле ввода в Vue.js:
1. Создайте новое приложение Vue.js:
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Bind Field Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="myField">
<p>{{ myField }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
myField: ''
}
});
</script>
</body>
</html>
2. В этом примере мы создали новое приложение Vue.js с контейнером <div> с идентификатором "app".
3. Внутри контейнера <div> мы добавили <input type="text">, которое будет использоваться для ввода данных пользователем.
4. Мы добавили директиву v-model к <input>, которая связывает поле ввода с переменной myField в объекте data.
5. Также добавили <p>, в котором выводится значение переменной myField.
6. Наконец, мы создали новый экземпляр Vue и привязали его к элементу с идентификатором "app". Внутри экземпляра Vue у нас есть объект data, содержащий переменную myField, которая начинает пустой строкой.
Теперь, когда пользователь вводит текст в поле ввода, значение myField автоматически обновляется, благодаря директиве v-model. И это значение отображается в элементе <p>.