How is this done in vue js?

Hello. Need to do input, so that when typing label would appear and stuck inside the input at the top. html css written help with vue.js to do add class label only when written at least one letter or remove if none of the letters. Important thing is that the class is not added when the focus is on input, when set. Thank you!
July 8th 19 at 15:23
5 answers
July 8th 19 at 15:25
Read vuejs.org/guide/class-and-style.html#ad
Do method\computed, and check the length of the text to the right box and ACC. return true\false, the class will automatically be applied
or you can just model a length that is responsible for the text input, to substitute in the expression class instead of the field true/false - Claudia42 commented on July 8th 19 at 15:28
A possible example guys? - pauline.Herman commented on July 8th 19 at 15:31
July 8th 19 at 15:27
With vue.js not familiar, but with jquery and the like in native js is event input.

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


It can help the algorithm implementation.
This event is triggered during input. That is, the symbol is fulfilled. Retired - is also fulfilled.
July 8th 19 at 15:29
it is possible in pure css using pseudo-class valid
codepen.io/anon/pen/rLxZGb
July 8th 19 at 15:31
materializecss.com/forms.html
I think something like this should (only label leaves in focus). But I think that twist will not be difficult.
July 8th 19 at 15:33
the Vue just
<input type="text" placeholder="text" v-model.lazy="str" v-bind:class="class | str">

data: {
 str: null
 },
if you'd then get lazy - Claudia42 commented on July 8th 19 at 15:36
if you need some doneproperly in computed - pauline.Herman commented on July 8th 19 at 15:39

Find more questions by tags FrameworksHTMLJavaScript