原生JS、JQ实现vue v-for循环渲染数据的效果
<div class="order-textBox" id="noworder"></div>方法一:jqvar data = {//模拟后端返回的json数据"textArr":[{"grade":'一等品',"mix":'20%',"number":'200'},{"grade":'准一等品',"mix":'20%',"number":'200'},{"grade":'
·
<div class="order-textBox" id="noworder"></div>
方法一:jq
var data = {//模拟后端返回的json数据
"textArr":[
{"grade":'一等品',"mix":'20%',"number":'200'},
{"grade":'准一等品',"mix":'20%',"number":'200'},
{"grade":'二等品',"mix":'30%',"number":'300'},
{"grade":'准二等品',"mix":'15%',"number":'150'},
{"grade":'三等品',"mix":'15%',"number":'150'},
{"grade":'总计',"mix":'100%',"number":'1000'},
],
};
var str1 = '';
$.each(data.textArr, function(i, item) {
console.log(item.grade);
str1 += '<div class="order-text">' + '<div class="order-text-text">' + data.textArr[i].grade + '</div>' + '<div class="order-text-text ">' + data.textArr[i].mix + '</div>' + '<div class="order-text-text">' + data.textArr[i].number + '</div>' + '</div>';
$("#noworder").html(str1)
});
方法二:原生js
var str1 = '';自定义字符串,用于拼接标签
var data = {
"textArr":[
{"grade":'一等品',"mix":'20%',"number":'200'},
{"grade":'准一等品',"mix":'20%',"number":'200'},
{"grade":'二等品',"mix":'30%',"number":'300'},
{"grade":'准二等品',"mix":'15%',"number":'150'},
{"grade":'三等品',"mix":'15%',"number":'150'},
{"grade":'总计',"mix":'100%',"number":'1000'},
],
};
for(let i=0;i<data.textArr.length; i++){
str1 += '<div class="order-text">' + '<div class="order-text-text">' + data.textArr[i].grade + '</div>' + '<div class="order-text-text ">' + data.textArr[i].mix + '</div>' + '<div class="order-text-text">' + data.textArr[i].number + '</div>' + '</div>';
}
document.getElementById("noworder").innerHTML = str1
这样就ok了,css样式就根据自身需求去写吧。
更多推荐
已为社区贡献21条内容
所有评论(0)