javascript - vue将字符串转为为html
本文介绍了javascript - vue将字符串转为为html的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
let str = "<img :src=('face[k].src)>"
this.commentList[i].Content = this.commentList[i].Content.replace(sArr[j], str)
需求是将str里面的字符串转成成html输出,这个img是表情来的,检测返回content中是否包含表情,然后替换,如果我这样输出的话只是字符串,请问如何转化为html呢?用eval()方法好像不支持
解决方案
如下,应该在获取到数据之后修正 Content 为 html, 并使用 v-html 指令绑定:
<template>
<ul v-for="item in commentList">
<li>
<div v-html='item.Content'></div>
</li>
</ul>
</template>
<script>
export {
data() {
return {
commentList: []
}
},
created() {
this.$http.get('api/get-commentlist?article_id=1').then((res) => {
res = res.body
res.list.forEach((item, i) => {
// sdfsafs[face-1]sad[face-2]
// 将被替换为
// sdfsafs<img src="face-1.jpg">sad<img src="face-2.jpg">
// ,请自行根据需要修改
item.Content = item.Content.replace(/\[face\-(\d+)\]/g, '<img src="face-$1.jpg">')
})
this.commentList = res.list
})
}
}
</script>
--- 补充 ---
其中 .replace() 方法的第二个参数也支持使用函数返回,即能实现更复杂的替换,如:
item.Content = item.Content.replace(/\[(.+)\]/g, function(word, $1){
return '<img src="/static/img/'+ this.face[$1].src +'" />'
})
这篇关于javascript - vue将字符串转为为html的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文