javascript - vue convertit la chaîne en HTML

Question

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

L'exigence est de convertir la chaîne en str en HTML pour la sortie. Cette img provient d'une émoticône. Vérifiez si le contenu renvoyé contient une émoticône, puis remplacez-la. Si je l'affiche comme ceci, ce sera simplement une chaîne. Comment puis-je le convertir en HTML ? Il semble que la méthode eval() ne soit pas prise en charge

Answer 1

Comme suit, après avoir obtenu les données, vous devez modifier le contenu en HTML et le lier à l'aide de la commande 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-.jpg">')
                })
                this.commentList = res.list
            })
        }
    }
</script>

--- Supplément ---

Le deuxième paramètre de la méthode .replace() prend également en charge l'utilisation de retours de fonction, qui peuvent réaliser des remplacements plus complexes, tels que :

item.Content = item.Content.replace(/\[(.+)\]/g, function(word, ){
  return '<img src="/static/img/'+ this.face[].src +'" />'
})

Answer 2

v-html?

Answer 3

Il est recommandé d'utiliser v-ifMieux

Answer 4

Utilisez innerHTML pour le natif, html() pour jq ;

Answer 5

Quelqu'un a-t-il rencontré le même problème~