<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="demo">
<my-bolk :count='countValue' price='45.8' book-name="西游记" :author="au"></my-bolk>
</div>
</body>
<script type="text/javascript">
Vue.component('my-bolk',{
template:`
<div>
<p>书名：{{bookName}}</p>
<p>作者：{{author.join(',')}}</p>
<p>单价：{{price}}</p>
<p>数量：{{count}}</p>
</div>
`,
props:{
count:Number,/* 限制count属性必须是数值 */
price:{
type:[Number,String],/* 限制price属性可以是数值，也可以是字符 */
default:100,/* 为price设置默认取值为100 */
validator:function(value){ /* 为price属性设置范围验证机制*/
return value>20 /* propC的取值必须大于20*/
}
},
bookName:{
required:true/* 设置bookName属性为必备属性 */
},
author:{
type:Array,/* 限制author属性必须为数组 */
default:function(){/* 数组类型属性的默认值必须是一个函数的返回值 */
return["作者一","作者二"]
}
}
}
})
var demo = new Vue({
el:".demo",
data:{
au:['孙悟空','猪八戒'],
countValue:20
}
})
</script>
</html>
