Как добавлять класс в зависимости от наличия текста в инпуте?

Question

[lavezzi1]

Нужно сделать инпут, при наборе текста в котором лейбл бы появлялся и прилипал внутри инпута вверху. html и css написал, помогите с помощью vue.js сделать добавление класса лейблу только тогда, когда написана хотя бы одна буква или убирать, если нет ни одной буквы. Важное - чтобы класс добавлялся именно не при фокусе на инпуте, а при наборе.

Comments

[lega]

Вот на Angular Light: jsfiddle.net/lega911/y4vab3wj на vue будет примерно так же

Answer 1

[D']

Читаем vuejs.org/guide/class-and-style.html#ad
Делаем метод\computed и проверяем длину текста к нужном поле, и соотв. возвращаем true\false, класс будет автоматически применятся

Comments

[Pavel Shvedov]

или можно сразу длинну модели, отвечающей за текст в инпуте, подставить в выражение класс вместо поля true/false

[lavezzi1]

А можно пример ребят?

Answer 2

[Станислав Почепко]

С vue.js не знаком, но на jquery да и вроде в нативном js есть событие input.

$('#..').on('input', function(){
var $el = $(this);
if($el.val().length){
$el.addClass('myClass');
} else {
$el.removeClass('myClass');
}
});

Может поможет сам алгоритм реализации.
Это событие срабатывает во время ввода. То есть появился символ - отработало. Удалился - тоже отработало.

Answer 3

[Антон]

можно на чистом css с помощью псевдокласса valid
codepen.io/anon/pen/rLxZGb

Answer 4

[Tupbich]

materializecss.com/forms.html
я так думаю тебе что-то вроде этого надо (только лэйбл уезжает при фокусе). Но думаю что подкрутить не сложно будет.

Answer 5

[shelomanovd]

на вуе просто

<input type="text" placeholder="text" v-model.lazy="str" v-bind:class="class | str">

data: {
		str: null
	},

Comments

[shelomanovd]

если нужно сразу то убери lazy

[shelomanovd]

если нужна определенная длинапроверяй в computed