Vue对象：允许对组件的属性实现数据验证。

最新推荐文章于 2022-09-20 19:45:30 发布

裴嘉靖

最新推荐文章于 2022-09-20 19:45:30 发布

阅读量608

点赞数

分类专栏： Vue 日报文章标签：对象组件 Vue

本文链接：https://blog.csdn.net/peijiajing/article/details/102864280

版权

日报同时被 2 个专栏收录

47 篇文章 0 订阅

订阅专栏

Vue

44 篇文章 0 订阅

订阅专栏

<!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>

裴嘉靖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue对象：允许对组件的属性实现数据验证。

<!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"></scri...
复制链接

扫一扫