如何添加約束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 
     } 
    }, 
    } 
});