Урок 7. Директива v-bind в Vue.js 3

На прошлых уроках по Vue 3 мы уже использовали интерполяцию – то есть переменная в фигурных скобках. С помощью неё можно выводить строки прямо в шаблон HTML. Но если, например, нам надо будет вывести атрибут, то необходимо будет его забайндить: использовать директиву v-bind.

Выглядит это так:

<input type="text" v-bind:placeholder="customPlaceholder" />

А уже в app.js прописываем плейсхолдер

const App = {
	data() {
		return {
			customPlaceholder: 'плейсхолдер'
		}
	}
}

Vue.createApp(App).mount('#app')

Забайндим еще и другой атрибут (value). И добавим слушатель ввода к данному текстовому инпуту. Полный код файла HTML:

<!DOCTYPE html>
<html lang="ru">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Vue тест upread.ru</title>
	</head>
	<body>
		<div id="app">
		<input 
		type="text" 
		v-bind:placeholder="customPlaceholder" 
		v-bind:value="customValue"
		v-on:input="changeInput" />
		<div>{{customValue}}</div>
		</div>
		<script src="https://unpkg.com/vue@next"></script>
		<script src="app.js"></script>
	</body>
</html>

По умолчанию мы получаем нативный event, извлекаем из него target.value и вставляем в див ниже. Файл app.js:

const App = {
	data() {
		return {
			customPlaceholder: 'плейсхолдер',
			customValue: ''
		}
	},
	methods: {
		changeInput(event){
			this.customValue = event.target.value
		}
	}
}

Vue.createApp(App).mount('#app')

Автор этого материала - я - Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.

статьи IT, Уроки по Vue, Vue, обработка событий

Читайте также:

Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.

Программирование up

Мои услуги