原生JS、JQ实现vue v-for循环渲染数据的效果

<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样式就根据自身需求去写吧。