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:测试效果：
