[Vue] props校验以及自定义validator
Validation例子参考代码:code实现功能:poc各种props的validation的用法使用思路限制String类型传值:<valid-two :content="2"></valid-two>使用:var validTwo = {props: {content
·
Validation
例子
- 参考代码:code
- 实现功能:
poc各种props的validation的用法
使用思路
- 限制String类型
传值:
<valid-two :content="2"></valid-two>
使用:
var validTwo = {
props: {
content : String
},
template: '<div>{{content}}</div>'
}
提示:
[Vue warn]: Invalid prop: type check failed for prop "content". Expected String with value "2", got Number with value 2.
- 限制Number类型
传值:
<valid-three content="Hello validation three"></valid-three>
使用:
var validThree = {
props: {
content : Number
},
template: '<div>{{content}}</div>'
}
提示:
[Vue warn]: Invalid prop: type check failed for prop "content". Expected Number with value NaN, got String with value "Hello validation three"
- 同时限制String,Number类型
传值:
<valid-four :content="{'object':'1'}"></valid-four>
使用:
var validFour = {
props: {
content : [String, Number]
},
template: '<div>{{content}}</div>'
}
提示:
[Vue warn]: Invalid prop: type check failed for prop "content". Expected String, Number, got Object.
- 自定义属性
传值:
<valid-five></valid-five>
使用:
var validFive = {
props:{
content : {
type : String,
required : false,//是否必须
default : 'Hello validation five',//默认值
validator: function(value){//自定义validator
return (value.length < 5)
}
}
},
template: '<div>{{content}}</div>'
}
提示:
[Vue warn]: Invalid prop: custom validator check failed for prop "content".
更多推荐
已为社区贡献2条内容
所有评论(0)