登录

javascript - vue将字符串转为为html

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()方法好像不支持

# JavaScript
为情所困为情所困1883 天前427 次浏览

全部回复(5) 我要回复

  • phpcn_u1582

    phpcn_u15822017-05-19 10:33:46

    如下,应该在获取到数据之后修正 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 +'" />'
    })

    回复
    0
  • 曾经蜡笔没有小新

    曾经蜡笔没有小新2017-05-19 10:33:46

    v-html?

    回复
    0
  • 天蓬老师

    天蓬老师2017-05-19 10:33:46

    建议使用v-if更好点

    回复
    0
  • 迷茫

    迷茫2017-05-19 10:33:46

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

    回复
    0
  • 大家讲道理

    大家讲道理2017-05-19 10:33:46

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

    回复
    0
  • 取消回复发送