powered by simpleCommunicator - 2.0.46     © 2025 Programmizd 02
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Vue.js input и v-model поместить НЕ рядом
11 сообщений из 11, страница 1 из 1
Vue.js input и v-model поместить НЕ рядом
    #40109456
катастрофа
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
подскажите пожалуйста как сделать если метку и инпут нужно разбросать по странице?
сейчас у меня так:
Код: html
1.
2.
3.
4.
<div class="sample"><input type="text" v-model="lbl2">
        <hr><!--линия_______________-->
        <h2>Hello, {{ lbl2 }}</h2>
        </div>
...
Рейтинг: 0 / 0
Vue.js input и v-model поместить НЕ рядом
    #40109634
катастрофа
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
вроде как сказано, что нужно в любом месте:
Код: html
1.
<span v-html>="lbl2"</span>


что-то не хочет......
...
Рейтинг: 0 / 0
Vue.js input и v-model поместить НЕ рядом
    #40109745
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
катастрофа
как сделать если метку и инпут нужно разбросать по странице?

катастрофа
вроде как сказано, что нужно в любом месте:
Код: html
1.
<span v-html>="lbl2"</span>


что-то не хочет......

У тебя очень странная интерпретация "разброса по странице"...
Я вот просто взял букварь... Посмотрел чего пишут про v-html... И вуаля!
автор все привязки данных игнорируются . Запомните, вы не можете использовать v-html для вложения шаблонов друг в друга, потому что движок шаблонов Vue не основывается на строках. Вместо этого нужно использовать компоненты, позволяющие сочетать и переиспользовать элементы UI.
https://ru.vuejs.org/v2/guide/syntax.html
...
Рейтинг: 0 / 0
Vue.js input и v-model поместить НЕ рядом
    #40109772
катастрофа
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
krvsa,
я это уже читал, но так и не понял как в коде:
Код: html
1.
2.
<div class="sample"><input type="text" v-model="lbl2"></div>
<h2>Hello, {{ lbl2 }}</h2>


после Hello, увидеть то, что введу в инпут поле?
...
Рейтинг: 0 / 0
Vue.js input и v-model поместить НЕ рядом
    #40109813
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
катастрофа , если верить букварю - то так и увидишь...
Код: html
1.
2.
<input v-model="message" placeholder="отредактируй меня">
<p>Введённое сообщение: {{ message }}</p>


https://ru.vuejs.org/v2/guide/forms.html
...
Рейтинг: 0 / 0
Vue.js input и v-model поместить НЕ рядом
    #40109816
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
катастрофа , я вот почитал букварь... И сделал простенькое приложение...
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<!--
<script src='https://code.jquery.com/jquery-latest.min.js'></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
<script src='tmp.js'></script>
-->
<style type='text/css'>
</style>
</head>
<body> 
<div id="app">
	<input v-model="message" placeholder="отредактируй меня">
	<p>Введённое сообщение: {{ message }}</p>
</div>
<script>
var app = new Vue({
	el: '#app',
	data: {
		message: ''
	}
})
</script>
</body>
</html>


Там все нормально выводится...
...
Рейтинг: 0 / 0
Vue.js input и v-model поместить НЕ рядом
    #40109827
катастрофа
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
krvsa,
так у меня то трудность, чтобы
Код: html
1.
2.
3.
4.
<div id="app">
	<input v-model="message" placeholder="отредактируй меня">
	<p>Введённое сообщение: {{ message }}</p>
</div>


строка
<p>Введённое сообщение: {{ message }}</p>
была НЕ в div id="app"
...
Рейтинг: 0 / 0
Vue.js input и v-model поместить НЕ рядом
    #40109833
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
катастрофа , и ты не понимаешь всю тщетность этого желания?

Вся реактивность вьюхи как раз и строится именно внутри своего app.
Я тебе больше могу сказать.
Весь контент страницы можно поместить в "корневой" див с id='app'. ;)
...
Рейтинг: 0 / 0
Vue.js input и v-model поместить НЕ рядом
    #40109839
катастрофа
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
krvsa, понял, с id понятно
Код: html
1.
2.
<div id="app"><input v-model="message" placeholder="отредактируй меня"></div>
<div id="app"><p>Введённое сообщение: {{ message }}</p></div>


не прокатит
но и с div class увы тоже самое
а про
krvsa
катастрофа , и ты не понимаешь всю тщетность этого желания?

Вся реактивность вьюхи как раз и строится именно внутри своего app.
Я тебе больше могу сказать.
Весь контент страницы можно поместить в "корневой" див с id='app'. ;)

понятно, спасибо
...
Рейтинг: 0 / 0
Vue.js input и v-model поместить НЕ рядом
    #40109861
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
катастрофа
но и с div class увы тоже самое

Видать ты в корне не понимаешь как это все работает...
Тут не работает твое "хочу вот так"... Здесь все работает как задумано разработчиками.
Есть контейнер - в нем все и срабатывает.
...
Рейтинг: 0 / 0
Vue.js input и v-model поместить НЕ рядом
    #40109871
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
krvsa
Тут не работает твое "хочу вот так"... Здесь все работает как задумано разработчиками.
Есть контейнер - в нем все и срабатывает.
учите ванильный js, html, css3 - и будет вам счастье
...
Рейтинг: 0 / 0
11 сообщений из 11, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Vue.js input и v-model поместить НЕ рядом
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]