console 命令行工具 X clear

console

//动态显隐
function detail(result,label,value,display){
    result= result.replace('${'+label+'}',value)
    var start = '${v-'+label+'}';
    var end = '${/v-'+label+'}';
    var startLen = start.length;
    var endLen = end.length;
    if(display){
        result= result.replace(start,'')
        result= result.replace(end,'')
    }else{
        var startIndex = result.indexOf(start);
        var endIndex = result.indexOf(end);
        result=result.substr(0,startIndex)+result.substr(endIndex+endLen);
    }
    return  result;
}
//替换值
function setVal(result,label,value){
    return result.replace('${'+label+'}',value);
}
window.onload=function(){
    var temp = document.getElementById("temp").innerHTML;
    var contail= document.getElementById("contail");
    var list=[{
        label:'列表标题1',
        value:1,
        type:0,
        name:"small",
    },{
        label:'列表标题2',
        value:2,
        type:1,
        name:"small",
    }]
    var str = '';

    for(var i =0;i<list.length;i++){
        //数组中的每一个对象
        var result=temp,ele = list[i];
        //替换模版
        result=setVal(result,'label',ele.label);
        result=setVal(result,'value',ele.value);
        result=setVal(result,'name',ele.name);
        //动态判断显隐
        result = detail(result,'type',ele.type,ele.type==0);
        // 每一行的模版拼接
        str +=result;
    }
    contail.innerHTML=str;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        <ul id="contail"></ul>
        <!-- 这里是模版 -->
        <div id="temp" style="display:none">
            <li class="li">
                ${label}
                <span>${value}</span>
                ${v-type}<span>动态显隐值${type}</span>${/v-type}
                <span>${name}</span>
            </li>
        </div>
	</body>
</html>

.li{
    font-size: 24px;
    color:red;
}
.li span{
    color:green;
}

本项目引用的自定义外部资源

mootools-core.js