Vue 用于 input.length 更改背景颜色答案

【问题标题】：Vue for input.length change background colorVue 用于 input.length 更改背景颜色
【发布时间】：2020-10-07 10:59:07
【问题描述】：

代码由两个输入字段组成，如果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/

【问题讨论】：

标签： javascript css vue.js vuejs2 vue-component

【解决方案1】：

一种方法是使用computed property 和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;
    }
}

【讨论】：

【解决方案2】：

您可以使用样式或类绑定，例如：

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

【讨论】：

【解决方案3】：

您可以使用class binding 根据全名输入的长度有条件地将类添加到初始值。

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

您还可以创建一个计算属性来了解全名输入是否大于 3，并改用该计算值（应该让您的模板更简洁）

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

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

这是一个有效的fiddle

【讨论】：