想要实现的效果是把下面的题目中的{***}。替换成上面的答案,要一一对应的。最后的效果是,横线上面是答案。
这里涉及正则的替换。并且是第一次替换的是questionstemold里面的{***},第二次替换的是你刚才替换里面的{***}。因为每次替换都是只能从开头往后找到第一个,也不是全局的替换。
this.resource=res.data; //res.data代表从接口中获取的数据
var fillanswer=JSON.parse(this.resource.fillanswer); //JSON 字符串转换后的对象
for(var i in fillanswer){
if(i==0){
this.questionstem=this.resource.questionstemold.replace('{***}','<span style="border-bottom:1px solid #1fa0fd;color:#67c23a">'+fillanswer[i]+'</span>'); //这里最关键的,第一转变的是接口中的那个数据。并且因为要加上下划线的样式所以这里加了html的内容。
}
else{
this.questionstem=this.questionstem.replace('{***}','<span style="border-bottom:1px solid #1fa0fd;color:#67c23a">'+fillanswer[i]+'</span>'); //这次转变的是上一步下标为o的那个里面的{***}的字符
}
}
页面上直接写<div v-html="questionstem" ></div>就可以啦