提示：
本文为VUE栏目：VUE学习：vue基础13————组件：自定义属性验证值
VUE学习：vue基础13————组件：自定义属性验证值
前言
本文vue框架中组件相关。
提示：以下是本篇文章正文内容，下面案例可供参考
组件
自定义属性验证值
v-bind来管理的属性后面跟着的双引号中写数字才能正确的表示数字类型，没有被Vue管理的属性，无论写什么内容都一定是string类型。
以下列举集中自定义属性验证值
设置属性propA的值只能是数字类型
可以限制的类型有：Number、String、Boolean、Array、Object、Date（yyyy-MM-dd）、Function、Symbol
<body>
<div id="app">
<test :prop-a="num" :prop-b="456"></test>
</div>
<template id="t1">
<h3>{{propA}}</h3>
</template>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {
num:123
},
methods: {},
components:{
test:{
template:"#t1",
props:{
propA:Number
}
}
}
});
</script>
自定义函数来限制内容
<body>
<div id="app">
<test :prop-a="num" :prop-b="456"></test>
</div>
<template id="t1">
<h3>{{propA}}</h3>
</template>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {
num:123
},
methods: {},
components:{
test:{
template:"#t1",
props:{
propB:{
validator:function (val) {
return !isNaN(val);
}
},
}
}
}
});
</script>
设置属性允许的类型为多个
<body>
<div id="app">
<test :prop-a="num" :prop-b="456"></test>
</div>
<template id="t1">
<h3>{{propA}}</h3>
</template>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {
num:123
},
methods: {},
components:{
test:{
template:"#t1",
props:{
propC:[String,Number],
}
}
}
});
</script>
设置属性接收String类型的值并且该属性必填
<body>
<div id="app">
<!-- v-bind来管理的属性后面跟着的双引号中写数字才能正确的表示数字类型，没有被Vue管理的属性，无论写什么内容都一定是string类型-->
<test :prop-a="num" :prop-b="456"></test>
</div>
<template id="t1">
<h3>{{propA}}</h3>
</template>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {
num:123
},
methods: {},
components:{
test:{
template:"#t1",
props:{
propD:{
type:String,
required:true
},
}
}
}
});
</script>
设置属性的默认值
<body>
<div id="app">
<!-- v-bind来管理的属性后面跟着的双引号中写数字才能正确的表示数字类型，没有被Vue管理的属性，无论写什么内容都一定是string类型-->
<test :prop-a="num" :prop-b="456"></test>
</div>
<template id="t1">
<h3>{{propA}}</h3>
</template>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {
num:123
},
methods: {},
components:{
test:{
template:"#t1",
props:{
propE:{
type:Boolean,
default:false
}
}
}
}
});
</script>
版权声明：本文为GAlbinus原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。