javascript - vue menukar rentetan kepada html

Question

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

Keperluan adalah untuk menukar rentetan dalam str kepada html untuk output. Img ini adalah daripada emotikon. Periksa sama ada kandungan yang dikembalikan mengandungi emotikon, dan kemudian menggantikannya. Bagaimanakah saya menukarnya kepada html? Nampaknya kaedah eval() tidak disokong

Answer 1

Seperti berikut, selepas mendapatkan data, anda harus mengubah suai Kandungan kepada html dan mengikatnya menggunakan arahan 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>

--- Supplement ---

Parameter kedua kaedah .replace() juga menyokong penggunaan pengembalian fungsi, yang boleh mencapai penggantian yang lebih kompleks, seperti:

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

Answer 2

v-html?

Answer 3

Digalakkan menggunakan v-ifLebih baik

Answer 4

Gunakan innerHTML untuk native dan html() untuk jq;

Answer 5

Ada sesiapa yang mengalami masalah yang sama~