На нашем сайте мы используем cookie для сбора информации технического характера и обрабатываем IP-адрес вашего местоположения. Продолжая использовать этот сайт, вы даете согласие на использование файлов cookies. Здесь вы можете узнать, как мы пользуемся файлами cookies.
Я согласен
логотип upread.ru

Урок 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, обработка событий

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




Страничная организация памяти
Урок 22. Структуры C#


© upread.ru 2013-2021
При перепечатке активная ссылка на сайт обязательна.
Задать вопрос
письмо
Здравствуйте! Вы можете задать мне любой вопрос. Если не получается отправить сообщение через эту форму, то пишите на почу up777up@yandex.ru
Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.