Урок 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 - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.
Программы на заказ
Отзывы
Контакты