<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<style>
</style>
</head>
<body>
<div id="demo">
<!-- <blog-post post-title="HELLO"></blog-post> -->
<blog-post
:prop-a="222"
:prop-b="123"
:prop-c="'aaa'"
:prop-d="33"
:prop-f="'success'"
></blog-post>
</div>
<script>
Vue.component('blog-post',{
props:{
propA:Number,
propB:[Number,String],
propC:{
type:String,
required:true
},
propD:{
type:Number,
default:100
},
propE:{
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: 'hello' }
}
},
propF:{
validator:function(value){
return ['success','warning','error'].indexOf(value) != -1
}
}
},
template:`
<div>
<h2>{
{propA}}</h2>
<h3>{
{propB}}</h3>
<h4>{
{propC}}</h4>
<h5>{
{propD}}</h5>
<h5>{
{propE}}</h5>
<h6>{
{propF}}</h6>
</div>
`
})
var vm = new Vue({
el:'#demo',
data:{
},
methods:{
}
})
</script>
</body>
</html>vue-Prop 类型
猜你喜欢
转载自blog.csdn.net/u012687612/article/details/111315076
今日推荐
周排行