如何添加约束V模型

Question

在vuejs方面：

如何限制（限制）添加到v-model正常吗？ 比方说，我想只允许0和5之间的数字。

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

也许我可以watch输入的值。但这有点不好意思，不是吗？

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 
    } 
    elseif (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 
     } 
    }, 
    } 
});