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

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

0 голосов
/ 17 июня 2020

Код состоит из двух полей ввода, если значение 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/

Ответы [ 3 ]

1 голос
/ 17 июня 2020

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

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"/>
1 голос
/ 17 июня 2020

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

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

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

1 голос
/ 17 июня 2020

одним из способов было бы использовать вычисленное свойство с 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;
    }
}
...