Question

就vuejs而言：

如何正确地向v-model添加约束（限制）？假设我想只允许0和5之间的数字。

<input type="number" v-model="model"/>

也许我可以watch输入值。但它有点hacky，不是吗？

UPD：其他选项是处理onChange，onKeyUp等以及其他事件：HTML Text Input allow only Numeric input

Answer 1

不要滥用watch。使用绑定和事件方法：

<input type="number" v-bind:value="model" @input="handleInput"/>

JS：

methods: {
  handleInput: function(event) {
    var value = Number(event.target.value)
    if (value > 5) {
      this.model = 5;
    } else if (value < 0 || Number.isNaN(value)) {
      this.model = 0;
    } else {
      this.model = value;
    }
  }
}

Answer 2

我对这些案例使用Vue Validator，示例JSFiddle here：

HTML：

<div id="app">
  <pre>{{$testValidator | json}}</pre>
  <validator name="testValidator">
    <form v-on:submit.prevent="submitForm" novalidate>
      <input type="number" v-model="value" v-validate:value="{min:1, max:10}"/>
      <span class="help-block" v-show="$testValidator.value.max || $testValidator.value.min">Please enter a number between 1 and 10.</span>
      <br/>
      <button type="submit">Submit</button>
    </form>
  </validator>
</div>

JS：

new Vue({
  el: "#app",
  data: {
    value: 1
  },
  methods: {
    submitForm: function() {
      this.$validate(true);
      if (this.$testValidator.valid) {
        // do other stuff here
      }
    },
  }
});

如何向v-model

2 个答案: