Html 评论分层渲染

 因为把对异常项目的评论内容全部放在了一个数据表里，有字数限制2000字。

展现在网页上要使每个专家的评论分层展示。

1.HTML的代码如下：

<div v-for="a in SpecilData" :key="a">
				<div style="background-color:#F1FCFC">
					<h3  class="pull-left" align="center" style="width:165px;word-wrap:break-word;">{{a.name}}</h3>
					<div  class="media-body" style="background-color:#FCFCFC">
						<h5 v-for="b in a.duanX" :key="b" style="margin-left:20px;">{{b}}</h5>
						<h6 style="float:right;">审核时间:{{a.time}}</h6>
					</div>  
				</div>
				<br>
			</div>

2.Data 里放置一个数组。

SpecilData:[],

3.JS 里获取数据库里的字符时，把数据处理后放到数组里，放进去的之后的格式其实是这样的，因为是动态资料，以下是渲染到网页上的测试，

SpecilData:[
        {
          name:"ssss",
          time:"2020-9-10",
          duanX:[
            "sdfsdfsdf",
            "sfsdfsfsdf",
            "sdfsfsdfsf"
          ]
        },
        {
          name:"ssss",
          time:"2020-9-11",
          duanX:[
            "sdfsdfsdfxxxx",
            "sfsdfsfsdfxxxxxx",
            "sdfsfsdfsfxxxx"
          ]
        }

      ]

4. 实际将从后端拿到的数据是这样的，进行处理放到 SpecilData[] 数组里。

<br>★[ John.Wang ] 的建议如下，时间：[ 2020/12/26 18:56:36 ]★<br>【改善建议】:好好好发了好好好发了好好好发了好好好发了<br><br>★[ Lucy.Zhen ] 的建议如下，时间：[ 2020/12/26 19:18:52 ]★<br>【改善建议】:好好发<br>

   a. 每个专家评论的分隔符为 “★[”

   b. 分隔完再通过  ] 分隔取 专家名字，  通过  [ 分隔取 专家评论时间。

   c. 通过 <br> 分隔取每段的内容。

上代码如下，取到的内容放到  Tex 里。

通过 FixSpecialTex 函数把资料整理到 数组里。再通过第一段的 HTML 代码渲染到网页上。

FixSpecialTex(Tex){//将专家审核的信息写在数组内
		var dataS = new Array();
		dataS = Tex.split("★[");

		var data2S = new Array();
		var duanluo = new Array();
		var duanX =new Array();
		dataS.forEach(element => {
		
			if(element.indexOf("]")!=-1){
				data2S = element.split("]★");
				let name = data2S[0].split("]")[0];
				let timex = data2S[0].split("[")[1];
				
				duanluo = data2S[1].split("<br>");
				console.log(duanluo);
				duanluo.forEach(ele => {
					if(ele!=null){
						
						duanX.push(ele);
					}
				});
				
				this.SpecilData.push({"name":name,"time":timex,"duanX":duanX});
				duanX=[];
			}
		});	

	},

5. 最后在网页上的效果如下：

【补充内容】自己在写另外一个网页的时候，意外的发现 Html 渲染会有问题，原因是要提前加载Bootstrap 的控件，所以未加载的话， Html 会发生错，所更新一下不用加载 Bootstrap 的HTML 的代码。

<div v-for="a in SpecilData" :key="a" >

                <div class="pass">

                <div  class="Tital-time" align="center" >@{{a.name}}  <span style="float:right">审核时间:{{a.time}}</span></div>

                <p  v-for="b in a.duanX" :key="b" >{{b}}</p><br>

                </div>

                <br>

            </div>