vue将字符串转为为html

Question

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()方法好像不支持

Answer 1

如下，应该在获取到数据之后修正 Content 为 html, 并使用 v-html 指令绑定：<template>&nbsp; &nbsp; <ul v-for="item in commentList">&nbsp; &nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div v-html='item.Content'></div>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; </ul></template><script>&nbsp; &nbsp; export {&nbsp; &nbsp; &nbsp; &nbsp; data() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; commentList: []&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; created() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.$http.get('api/get-commentlist?article_id=1').then((res) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; res = res.body&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; res.list.forEach((item, i) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // sdfsafs[face-1]sad[face-2]&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // 将被替换为&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // sdfsafs<img src="face-1.jpg">sad<img src="face-2.jpg">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // ，请自行根据需要修改&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; item.Content = item.Content.replace(/\[face\-(\d+)\]/g, '<img src="face-$1.jpg">')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.commentList = res.list&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }</script>