Как переключать класс, когда длина ввода не равна 0

Question

как добавить класс, если input [type = "email"] имеет длину> 0, и удалить класс, если input длина = 0?

Я не очень хорош в JavaScript. Решение может быть в vue.js или в чистом javascript.

Я попробовал несколько примеров из Интернета, но безуспешно.

<div class="form-group">
  <input type="email" name="email" required>
  <label for="email">Email</label>
</div>

• добавить класс, если длина ввода> 0
• удалить класс, если длина ввода = 0

Answer 1

Если, добавляя и удаляя класс, вы имеете в виду класс div, то в jQuery это выглядит так:

$(document).on("change", "input", function(){
    if($(this).val().length > 0) {
        $("div").addClass("form-group");
    } else {
        $("div").removeClass("form-group");
    }
});

Однако, если вы хотите чистый Javascript, он будет выглядеть примерно так

<div id="myDiv" class="form-group">
  <input id="myInput" type="email" name="email" onChange="checkValue()" required>
  <label for="email">Email</label>
</div>

и Javascript:

function checkValue(){
   if(document.getElementById("myInput").value.length > 0){
      document.getElementById("myDiv").classList.add("form-group");
   } else {
      document.getElementById("myDiv").classList.remove("form-group");
   }
}
checkValue(); //First time run to see if input is empty or not