84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
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()方法好像不支援
如下,應該在取得到資料之後修正 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-.jpg">') }) this.commentList = res.list }) } } </script>
--- 補充 ---
其中 .replace() 方法的第二個參數也支援使用函數返回,即能實現更複雜的替換,如:
item.Content = item.Content.replace(/\[(.+)\]/g, function(word, ){ return '<img src="/static/img/'+ this.face[].src +'" />' })
v-html?
建議使用v-if更好
v-if
原生的用innerHTML,jq用html();
沒有人遇到同樣的問題嗎~
如下,應該在取得到資料之後修正 Content 為 html, 並使用 v-html 指令綁定:
--- 補充 ---
其中 .replace() 方法的第二個參數也支援使用函數返回,即能實現更複雜的替換,如:
v-html?
建議使用
v-if
更好原生的用innerHTML,jq用html();
沒有人遇到同樣的問題嗎~