21_props_validation.html

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<html>
<head>
    <title>Props validation - Vue.js</title>
    <style>
    </style>
</head>
<body>
    <div id="app">
        <p>You can view the information here:</p>
        <user-cmp></user-cmp>
    </div>
</body>
<script>
Vue.component("user-cmp",{
    props:{
        name:{
            type:String,
            default:"Max"
        },
        age:["String","Array"],
        gender:{
            type:Object,
            default:function(){
                return {gender:"Male"};
            }
        }
    },
    template : "<table>"+
               "<tr><td>Name</td><td>{{name}}</td></tr>"+
               "<tr><td>Age</td><td>{{age}}</td></tr>"+
               "<tr><td>Gender</td><td>{{gender}}</td></tr>"+
               "</table>"
});

new Vue({
    el:"#app",
    data:{
    }
});
</script>
</html>
