041——VUE中組件之pros數據的多種驗證機制實例詳解

時間 2019-11-17

標籤 vue 組件 pros 數據多種驗證機制實例詳解简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>組件之pros數據的多種驗證機制實例詳解</title>
		<script src="vue.js"></script>
	</head>

	<body>
		<div id="hdcms">
			<hd-news :show-del-button="true"></hd-news >
			<!--<hd-news :show-del-button="1" ></hd-news >-->
			
		</div>
		<script typeof="text/x-template" id="hdNews">
			<div>
				<li v-for="(v,k) in lists">
					{{v.title}}
					<button v-if="showDelButton">刪除</button>
				</li>
			</div>
		</script>
		<script>
			var hdNews = {
				template: "#hdNews",
				props: {
					showDelButton:{
						type:[Boolean,Number], //規定此數據必須是Boolean或Number類型
						required:true  //規定此數據必須填寫
					},
					
/*					showDelButton:{
						validator(v){
							return v===1||v===0; //值必須是1或0
						}
					},*/
					lists:{
						type:Array,
						default(){
							return [{title:'科技興國'}] //規定此數據的默認值
						}
					}
					
					
					
					
				},
				data() {
					return {};
				}
			};
			new Vue({
				el: "#hdcms", //根組件，其餘的就是子組件
				//定義局部組件：
				components: {
					hdNews
				},
				data: {
					news:[
							{title:'hdcms'},
							{title:'hdphp'},
							{title:'hdphpHtml'}
						]
				}
			});
		</script>

	</body>

</html>

相關標籤/搜索