Vue для input.length изменить цвет фона

Question

Код состоит из двух полей ввода, если значение Fullname больше 3, то предполагается изменение фона поля ввода initial на зеленый. Есть ли способ сделать это?

Просмотр

<div id="app">
  <input type="text" v-model="fullname" placeholder="Enter Full Name" @input="changeInitialColor"/>
  <input type="text" v-model="initial" placeholder="On Full Name make it green"/>
</div>

Скрипт

new Vue({
  el: "#app",
  data: {
    fullname:'',
    inital:''
  },
  methods: {
    changeInitialColor(){
     if(this.fullname.length > 3){
      console.log('Change v-model=Initial field color into green');
     }
     else{
      console.log("Dont change color");
     }
    }
  }
})

Ниже приведен код на JSFIDDLE

https://jsfiddle.net/ujjumaki/kya27g9w/1/

Answer 1

Вы можете использовать привязку стиля или класса, например:

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"/>

Answer 2

Вы можете сделать привязку класса , чтобы условно добавить класс к начальному на основе длины ввода полного имени.

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

Вы также можете создать вычисляемое свойство, чтобы знать, больше ли введенное полное имя, чем три, и использовать это вычисленное значение вместо этого (чтобы ваш шаблон был более чистым)

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

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

Вот рабочий скрипка

Answer 3

одним из способов было бы использовать вычисленное свойство с css привязками классов

<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;
    }
}