VUE学习：vue基础13————组件：自定义属性验证值
提示：
本文为VUE栏目：VUE学习：vue基础13————组件：自定义属性验证值
VUE学习：vue基础13————组件：自定义属性验证值
- 前言
- 组件
-
- 自定义属性验证值
-
- 设置属性propA的值只能是数字类型
- 自定义函数来限制内容
- 设置属性允许的类型为多个
- 设置属性接收String类型的值并且该属性必填
- 设置属性的默认值
前言
本文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">
<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">
<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>