提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

vue组件参数校验

Vue组件 参数 校验
2023-09-11 14:22:19 时间

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子组件传值</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
     <div id="root">
         <child content="you"></child>
     </div>
     <script>
         Vue.component('child',{
               props:{
                  content:{
                      type:String,
                      validator:function(value) {
                           return  (value.length>5)
                      }
                  }
               },
               template:'<div>{{content}}</div>'
         });
         var vm=new Vue({
             el:'#root'
         })
     </script>
</body>
</html>

　　效果：

修改content的内容：

将

<child content="you "></child> 
改为

<child content="helloworld"></child
>
效果：

这就是参数校验

相关文章