Question

如果客户已经填写了字段，我需要更改输入的边框颜色。

如何使用VueJS做到这一点？

<div class="some-basic-div", '@change' => 'checkForInput'>
  <div class="dc-form-group ">
   <input type='text' id='first_name' >
  </div>
  <div class="dc-form-group ">
    <input type='text' id='last_name' >
  </div>
  <div class="dc-form-group ">
    <input type='text' id='some_text' >
  </div>
</end>

我尝试使用纯JavaScript。

 checkForInput: function(e) {
    let targetDiv = event.target;

    if (targetDiv.value == "") {
      targetDiv.classList.remove("mod-group-success");
    } else {
      targetDiv.classList.add("mod-group-success") ;
    }
  }

因此，当我更改输入时，我需要更改我填写的输入样式。

Answer 1

使用Class & Styles binding，

下面是一个简单的类绑定演示。

Vue.config.productionTip = false
app = new Vue({
  el: "#app",
  data: {
    testValue: ''
  },
  computed: {
    computedInputStyleEnable: function () { // or use one method instead of computed property
      //apply your own logic at here to determinate if enable input-has-value-style
      return this.testValue && this.testValue.length > 0
    }
  },
  methods: {
    applyInputStyle: function (targetInput) { // bind with one method and return Array
      return [targetInput && targetInput.length > 0 ? 'input-has-value-style' : 'input-no-value-style']
    }
  }
})

.input-has-value-style {
  border: 2px solid green;
  background-color:lightgreen;
}

.input-no-value-style {
  border: 2px solid red;
  background-color:pink;
}

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<div id="app">
  <div>
    <p>Already filled in {{testValue.length}} characters.</p>
    <input type='text' v-model="testValue"
     :class="{'input-has-value-style': computedInputStyleEnable}"
    />
  </div>
  <div>
    <p>Already filled in {{testValue.length}} characters.</p>
    <input type='text' v-model="testValue"
     :class="applyInputStyle(testValue)"
    />
  </div>
</div>

Answer 2

我已经编写了以下代码来处理此问题：

Vue.config.productionTip = false
app = new Vue({
 el: "#app",
 data: {
  testValue: ''
 }
},
  methods: {
    checkForInput: function(e){
      let input = event.target
      if (input.value != "") {
        input.classList.add("mod-group-success") ;
      } else {
        input.classList.remove("mod-group-success");
      }
    }
  }
})

并放在前端：

'@change' => 'checkForInput'

如果输入已经填写，VueJS会更改输入的边框颜色

2 个答案: