zoukankan      html  css  js  c++  java
  • 041——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>
    

      

  • 相关阅读:
    POJ 3660 Cow Contest
    HDOJ 2093 sscanf的使用,字符串对齐,快排
    HDOJ 2091 空格的特殊输入输出格式
    COJ 1081: 集训队分组
    HDOJ 2948 错排公式
    POJ 1936 All in All
    POJ 1035 Spell checker
    HDOJ 2094 set和map的使用
    HDOJ 2036 多边形的面积
    HDOJ 1166 敌兵布阵
  • 原文地址:https://www.cnblogs.com/yiweiyihang/p/8202908.html
Copyright © 2011-2022 走看看