Vue学习使用系列五【props的驗證使用】

1：code
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>Document</title>
 8     <script src="../assets/vue.js"></script>
 9 </head>
10 
11 <body>
12 
13     <div id="app">
14         <div>
15             <component_t01 :prop_number="data01" :prop_stringOrNumber="data02" :prop_required="data02" :prop_myvalidate="data04"></component_t01>
16         </div>
17     </div>
18     <template id="template01">
19         <div>
20             <p>prop_number=> {{prop_number}}</p> <p>prop_stringOrNumber=> {{prop_stringOrNumber}}</p>
21             <p>prop_required=> {{prop_required}}</p> <p>prop_myvalidate=> {{prop_myvalidate}}</p>
22         </div>
23     </template>
24     <script>
25         Vue.component("component_t01", {
26             props: {
27                 prop_number: Number,
28                 prop_stringOrNumber: [String, Number],
29                 prop_required: {
30                     type: String,
31                     required: true
32                 },
33                 //自定義函數，value必需匹配如下幾個值
34                 prop_myvalidate: {
35                     validator: function(value) {
36                         return ['success', 'fail', 'warning', 'error'].indexOf(value) !== -1;
37                     }
38                 }
39             },
40             template: "#template01"
41         })
42         new Vue({
43             el: "#app",
44             data: {
45                 data01: 10,
46                 data02: "ok",
47                 data03: false,
48                 data04: "error"
49             }
50         })
51     </script>
52 </body>
53 
54 </html>
2:测试效果：