javascript - vue menukar rentetan kepada html
为情所困
为情所困 2017-05-19 10:31:46
0
5
793
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

为情所困
为情所困

membalas semua(5)
phpcn_u1582

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 +'" />'
})
曾经蜡笔没有小新

v-html?

Peter_Zhu

Digalakkan menggunakan v-ifLebih baik

迷茫

Gunakan innerHTML untuk native dan html() untuk jq;

大家讲道理

Ada sesiapa yang mengalami masalah yang sama~

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!