vue組件參數校驗

時間 2019-11-17

標籤 vue 組件參數校驗简体版

原文原文鏈接

代碼：html

<!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>

　　效果：vue

修改content的內容：npm

將.net

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

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

這就是參數校驗

相關標籤/搜索