原生js 根据数据渲染列表

字符串模板

<div id="box"></div>

var list = [{
	        id:'001',
	        name:'iphone12 plugs',
	        imgurl:'img/ip7.jpg',
	        price:10000.00,
	        sale:9999.00,
	        color:'绿色'
	    },{
	        id:'002',
	        name:'iphone11',
	        imgurl:'img/ip11.jpg',
	        price:6688.00,
	        sale:6000.00,
	        color:'黑色'
	    },{
	        id:'003',
	        name:'荣耀7',
	        imgurl:'img/honor7.jpg',
	        price:2000.00,
	        sale:1899.00,
	        color:'白色'
	    }];

   var content = `
`;
	    for(var i=0;i<list.length;i++){
	    	content += `
${list[i].id}">
				${list[i].imgurl}"/>
				
${list[i].name}
				
颜色：${list[i].color}
				
原价：${list[i].price.toFixed(2)}
				
现价：${list[i].sale.toFixed(2)}
	    	
`;
	    }
	  content += `
`;

	    // 获取元素
	    var box = document.getElementById('box');
	    box.innerHTML = content;