VUE学习：vue基础13————组件：自定义属性验证值

最新推荐文章于 2023-03-04 22:46:13 发布

北凉冬

最新推荐文章于 2023-03-04 22:46:13 发布

阅读量524

点赞数

分类专栏： vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/GAlbinus/article/details/117200601

版权

vue.js 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

本文介绍了在Vue框架中如何对组件的自定义属性进行验证和设定默认值，包括设置属性只接受数字、自定义验证函数、允许的类型为多个、设置必填的String类型属性以及属性的默认值。示例代码详细展示了如何实现这些功能。

摘要由CSDN通过智能技术生成

提示：
本文为VUE栏目：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>

北凉冬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE学习：vue基础13————组件：自定义属性验证值

提示：本文为VUE栏目：VUE学习：vue基础13————组件：自定义属性验证值VUE学习：vue基础13————组件：自定义属性验证值前言组件自定义属性验证值设置属性propA的值只能是数字类型自定义函数来限制内容设置属性允许的类型为多个设置属性接收String类型的值并且该属性必填设置属性的默认值前言本文vue框架中组件相关。提示：以下是本篇文章正文内容，下面案例可供参考组件自定义属性验证值v-bind来管理的属性后面跟着的双引号中写数字才能正确的表示数字类型，没有被Vue管理的属性
复制链接

扫一扫

专栏目录