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>

    <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>