色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

vue input 判斷

方一強2年前9瀏覽0評論

對于Vue中的input組件,有時候我們需要判斷其輸入值是否符合特定的要求。這時我們可以使用指令和事件來實現判斷。下面來看一些示例代碼。

// 使用指令
<template>
<input v-model="inputValue" v-validate:integer>
<p>{{errors.first('inputValue')}}</p>
</template>
<script>
import { validationMixin } from 'vuelidate'
export default {
mixins: [validationMixin],
data () {
return {
inputValue: ''
}
}
}
</script>

上面的代碼中,我們使用了v-validate指令來表示該input元素需要進行驗證,并指定該元素需要驗證整數類型。在<p>標簽中,我們使用了errors.first()方法來獲取驗證不通過的第一個錯誤信息,如果驗證通過則返回空字符串。

// 使用事件
<template>
<input v-model="inputValue" @blur="onInputBlur">
<p>{{errorMsg}}</p>
</template>
<script>
export default {
data () {
return {
inputValue: '',
errorMsg: ''
}
},
methods: {
onInputBlur () {
if (!/^[1-9]\d*$/.test(this.inputValue)) {
this.errorMsg = '請輸入正整數'
} else {
this.errorMsg = ''
}
}
}
}
</script>

在上面的代碼中,我們使用了@blur事件來表示在input元素失去焦點時需要觸發的操作。在方法中,我們通過正則表達式判斷輸入值是否為正整數,如果不是則設置errorMes為‘請輸入正整數’,如果是則設置errorMes為‘’。