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>
    

      

  • 相关阅读:
    mock数据
    关于适配各种浏览器的图片预览。
    闭包
    兼容性 适配
    递归 使用callee
    webservice的model层命名空间不同的问题
    删除右键菜单中的Git
    windows server core 设置shell 及切换
    设置共享用户名密码
    Windows Remote Shell(WinRM)使用介绍
  • 原文地址:https://www.cnblogs.com/yiweiyihang/p/8202908.html
Copyright © 2011-2022 走看看