Javascript – Vue konvertiert String in HTML

Question

let str = "<img :src=('face[k].src)>"
this.commentList[i].Content = this.commentList[i].Content.replace(sArr[j], str)

Die Anforderung besteht darin, die Zeichenfolge in str für die Ausgabe zu konvertieren. Überprüfen Sie, ob der zurückgegebene Inhalt ein Emoticon enthält, und ersetzen Sie es dann. Wie konvertiere ich es in HTML? Es scheint, dass die Methode eval() nicht unterstützt wird

Answer 1

如下，应该在获取到数据之后修正 Content 为 html, 并使用 v-html 指令绑定：

<template>
    <ul v-for="item in commentList">
        <li>
            <p v-html='item.Content'></p>
        </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 +'" />'
})

Answer 2

v-html?

Answer 3

建议使用v-if更好点

Answer 4

原生的用innerHTML，jq用html();

Answer 5

没有人遇到同样的问题吗~