[Vuejs]-Vue for input.length change background color

by

1👍

✅

one way would be to use a computed property with css class bindings

<input type="text" v-model="fullname" placeholder="Enter Full Name"/>
<input type="text" v-model="initial" :class="{ green: fullnameIsMoreThan3Chars }"/>

// --
,methods: { ... }
,computed: {
    fullnameIsMoreThan3Chars(){
        return this.fullname.length > 3;
    }
}
👤birdspider

1👍

You could use style or class binding like :

style="{'background-color':fullname.length>3?'green':''}":

 <input type="text" v-model="initial"
 style="{'background-color':fullname.length>3?'green':''}" 
placeholder="On Full Name make it green"/>
👤Boussadjra Brahim

1👍

You can do a class binding to conditionally add a class to initial based on the length of the fullname input.

<input type="text" v-model="initial" placeholder="On Full Name makes it green" :class="{'green': fullname.length > 3}"/>

You can also create a computed property to know if the fullname input is greater than three and use that computed value instead (should keep your template cleaner)

<input type="text" v-model="initial" placeholder="On Full Name makes it green" :class="{'green': fullNameOk}"/>

{
  ...
  computed: {
    fullNameOk() {
      return this.fullname.length > 3
    }
  }
}

Here’s a working fiddle

👤Jair Reina

Leave a comment