使用v-html解决Vue.js渲染过程中html标签不能被解析(html标签显示为字符串)

原文地址:http://blog.csdn.net/faryang/article/details/53011703

在网页中,后台传来的json数据中包含html标签,将该json数据绑定到Vue.js中对象中,对该对象进行for循环,发现数据中的html标签不能被解析,而是当作字符显示出来。问题如下所示:



解决:

Vue.js中提供了v-html这个指令来解决这个问题,或者对数据对象使用{{{vm.data}}}三个大括号来包裹对象,就可以正常解析了。代码改动如下:


此外某些情况下,使用{{{}}}符号仍然不能解析html标签,但v-htm指令却可以,可能是Vue.js存在的bug吧。解释见下图


参考资料:

Vue.js官网api----http://vuejs.org.cn/api/#v-html


  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
在uni-app,v-html是一种语法,用于在H5端和app-vue的v3编译器下使用。它可以将富文本内容渲染到页面上。但需要注意的是,在小程序不支持v-html语法。所以如果你的项目包含小程序,就不建议使用v-html。 相比之下,uni-app提供了另一种内置组件rich-text来实现富文本的渲染。rich-text具有全端支持和高性能的优势,但缺点是无法为富文本的图片和超链接单独设定点击事件。如果富文本需要有可点击事件的内容,也不推荐使用rich-text组件。 另外,有一款插件称为uparse也可以实现富文本的渲染。uparse具有全端支持(除了nvue)的特点,但是不支持nvue。因此,如果你的项目包含app和小程序,可以考虑使用uparse。在nvue页面可以单独使用rich-text组件来实现富文本的渲染使用uparse的方法是先从插件市场导入uParse修复版-html富文本加载插件,然后在页面引入uParse组件并在模板使用。可以通过@preview和@navigate事件来处理富文本图片和链接的点击事件。在APP.vue还需要引入parse.css样式文件才能生效。如果不想在每个页面单独引入组件,也可以在main.js进行全局注册。 总结起来,如果项目不包含小程序,可以使用v-html语法。如果项目包含小程序,可以考虑使用uparse,然后在nvue页面使用rich-text组件。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [uni-app富文本渲染方案rich-text、uparse、v-html简单解析](https://blog.csdn.net/u012767761/article/details/127282124)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [uniapp-初学者从零到有-三天开发](https://download.csdn.net/download/qq_35869617/76755146)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值