vue.js - vue.js 中多个 v-model 的单个函数

Question

是否可以将多个 v-model 值用于一个常用功能。就我而言，使用 vue 脚本中方法内的通用函数对多个字段进行输入验证。

<input type="number" v-model="field1" @keypress="onlyTwoDecimal" >
<input type="number" v-model="field2"@keypress="onlyTwoDecimal" ><input type="number" v-model="field2" @keypress="onlyTwoDecimal" 

<script>......    ....    method:{onlyTwoDecimal ($event) {  let keyCode = ($event.keyCode ? $event.keyCode : $event.which);

    // only allow number and one dot
    if ((keyCode < 48 || keyCode > 57) && (keyCode !== 46 || this.field1.indexOf('.') != -1)) { // 46 is dot
     $event.preventDefault();
    }

    // restrict to 2 decimal places
    if(this.field1!=null && this.field1.indexOf(".")>-1 && (this.field1.split('.')[1].length > 1)){
    $event.preventDefault();
    }
  }

}

标签： vue.js

Answer 1

您可以创建一个数组fields并使用v-for.

<div v-for="(field,index) in fields" :key="index">
  <input type="number" v-model="field" @keypress="onlyTwoDecimal">
</div>