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

vue

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

以上是 Vue学习使用系列五【props的驗證使用】 的全部内容, 来源链接: utcz.com/z/379923.html

回到顶部