Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <title>数据验证</title>
</head>
​
<body>
<style>
#app{
    border: 1px solid;
    padding:10px;
    text-align: center;
}
</style>
​
<div id="app">
    <!-- 报错：[Vue warn]: Unknown custom element: <mycomponent> -->
    <!--<myComponent></myComponent>  因为html 中 是不区分大小写的 也就是 myComponent === mycomponent-->
    <my-component></my-component>
    <hr>
    <input type="text" v-model="d">
    <type-component :a="a" :b="b" :c="c" :d="d" :e="e" :f="f" :g="g"></type-component>
</div>
​
​
<script>
Vue.component('myComponent',{
    template: '<div>我是一个组件</div>'
})
​
Vue.component('typeComponent',{
    props:{
        a:Number,
        b:[String,Number],
        c:{
            type: Boolean,
            default:true
        },
        d:{//[Vue warn]: Missing required prop: "d"
            type: Number,
            required: true
        },
        e:{
            type: Array,
            default:function(){
                return [666]
            }
        },
        f:{
            //自定义一个验证函数
            validator:function(value){
                return value > 10
            }
        },
        g:{
            type: Function
        }
    },
    template:'<div>{{a}}--{{b}}--{{c}}-{{d}}--{{e[0]}}--{{f}}--{{g}}</div>'
})
​
var app = new Vue({
    el: '#app',
    data:{
        a:1,
        b: 66,
        c: true,
        d:456,
        e:[],
        f: 88,
        g:console.log()
    }
})
​
​
</script>    
</body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers