zoukankan      html  css  js  c++  java
  • 组件:参数验证props:组件参数验证语法

    <!DOCTYPE html>
    <html lang="zh">
    
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <link href="../css/style.css" rel="stylesheet"> </head>
    <body>
    <div id="myApp">
        <h1>身世之谜</h1>
        <show-member-info name="koma" :age="25" :detail="{address:'earth', language:'世界语'}"></show-member-info>
    </div>
    <script>
        Vue.component('show-member-info', {
            props: {
                name: {
                    type: String,
                    required: true,
                },
                age: {
                    type: Number,
                    validator: function (value) {
                        return value >= 0 && value <= 130;
                    }                
                },
                detail: {
                    type: Object,
                    default: function() {
                        return {
                            address: 'US',
                            language: 'English',
                        };
                    }
                },
            },
            template: '<div>姓名:{{this.name}}<br/>' 
                + '年龄:{{this.age}}岁<br/>'
                + '地址:{{this.detail.address}}<br/>'
                + '语言:{{this.detail.language}} </div>',
        });
        var myApp = new Vue({
            el: '#myApp', 
        });
    </script>
    </body>
    
    </html>
  • 相关阅读:
    tensorflow中协调器 tf.train.Coordinator 和入队线程启动器 tf.train.start_queue_runners
    C++ 第八天
    C++ 第七天
    C++ 第四天
    c++ 编译报错汇总(随时更新)
    C++ 第二天
    C++ 第三天
    c++ 继承(二)
    c++ 继承(一)
    回调函数
  • 原文地址:https://www.cnblogs.com/Jeely/p/11057464.html
Copyright © 2011-2022 走看看