美文网首页我爱编程
Vue学习之——v-html解决Vue.js渲染过程中html标

Vue学习之——v-html解决Vue.js渲染过程中html标

作者: Lusia_ | 来源:发表于2017-02-20 23:25 被阅读3263次

之前对接口遇到了接口数据中包含图片或音频的地址的格式,也就是图文混排格式,所以封装了字符串替换的方法。但是替换完之后就是下图,html不能解析。


Paste_Image.png

封装的图文混排解析方法:

  strToUrl: function(str) {
    if (!str || typeof str != "string") return "";
    str = str.toString();
    return str.replace(/http:\/\/.*?\.(mp3|jpg|jpeg|png|gif)/ig, function (w) {
      if (/mp3$/i.test(w)) {
        return '<audio src="' + w + '"controls="/>'
      } else {
        return '![](' + w + ')'
      }
    })
  }

解决:

用v-html解析html标签<span v-html="item.name"></span>
不能使用<span>{{item.name}}</span>解析,{{}}只能解析字符串。


解决问题是看到的文档,可以看一下。本项目使用的是vue2.0,所以实践中{{{}}}并不可行。
http://blog.csdn.net/faryang/article/details/53011703

相关文章

网友评论

    本文标题:Vue学习之——v-html解决Vue.js渲染过程中html标

    本文链接:https://www.haomeiwen.com/subject/oxhywttx.html