Vue解析后端传来的带有文字和html代码的数据

最新推荐文章于 2023-12-19 08:13:53 发布
原创 最新推荐文章于 2023-12-19 08:13:53 发布 · 6.2k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

博主在毕设学习Vue时，前端解析后端传来带文字和图片的文章，采用在MySQL存文字+html代码形式，却发现前端将html代码当文字展示。解决办法是添加v-html属性，使文字中的html代码被解析显示。

产生原因

最近在毕设过程中学习了Vue，遇到一种情况是在前端解析后端传来的带有文字和图片的文章。考虑了很多种方法，最后选择直接在MySQL数据库中存储文字+html代码的形式。但是写好之后发现前端直接将html代码以文字形式展示，未进行解析。

解决方式

在这里插入图片描述
添加v-html属性，文字中的html代码部分，将被解析并显示对应代码。

参考文章

Vue 将后台传过来的 带html字段的字符串 转换为 HTML

【Dv2Admin】解决时间选择器传入后端有时区问题异常
最新发布
Mr数据杨
03-11 340
时区问题是应用开发中不可忽视的一环，特别是在涉及到全球化部署的情况下，时间数据的准确性和一致性至关重要。通过本文的案例分析，开发者可以清楚地了解ElementUI的时区问题来源，并掌握两种常见的解决方案。无论是通过全局格式化修正，还是通过批量处理脚本修复历史数据，都可以有效避免8小时的时间差。开发者在日常工作中，除了关注功能的实现，还需要特别注意时间数据的正确处理，确保在全球范围内部署的应用程序能够无缝处理时间数据，提供一致的用户体验。希望本文能为开发者们提供实用的指导，帮助解决时区相关的问题。
Vue使用Element UI 的upload做Excel文件上传，后端拿到Excel做数据导入
JavaXCH的博客
08-02 7300
首先呢，我的需求是用Excel表做数据导入，前端传入文件，后端拿到文件解析，然后插入数据库，由于对vue不熟悉，踩了很多的坑，最后还是做完了，这里分享一下我踩过的坑。 直接贴代码吧： <!--文件导入--> <template> <div> <el-upload class="filter-item" name="file" action="string"
后端返回文字带有标签，前端解析，可以转化为html页面的形式展示
weixin_43734480的博客
07-28 4484
用v-html： {{message}}
vue前端将从后端取出来的html内容解析显示再前端
qq_53825610的博客
08-21 1753
【代码】vue前端将从后端取出来的html内容解析显示再前端。
Vue使用v-html展示后端返回的html内容
热门推荐
chenjxj123的博客
02-15 2万+
使用v-html展示后端返回的html内容，并解决js不执行问题 在UI平台开发的过程中，因为测试报告是在后台生成的，需要将测试报告整个进行返回到前端进行展示，但是vue不能像原生html一样直接展示render返回的响应页面，所以笔者借助v-html进行展示。具体写法如下： <div ref="reportHTML" v-html="htmlText" class="web-con"></div> <script> data(){ return{ ht
Vue将后台传过来的带html字段的字符串转换为浏览器可识别的HTML
浩星
03-16 3080
前言： 在我们写项目的时候，也有可能会遇到后台给我们传来的带有标签的字符串过来，这时候我们需要给页面上把标签渲染出来的情况，这里说说解决他的办法，使用的是vue的v-html 这里的nav.con是后台传来的数据 <div class="textDiv" v-html='nav.con'> <!-- <div>左手交易手续费，右手项...
Vue获取java后端程序返回html格式文本元素
PROHATE的专栏
08-13 5079
vue与spring boot+thymeleaf前端接口交互，数据解析
后端的html内容在vue中解析,基于Vue来解析页面在浏览器中呈现的过程中所涉及到的知识点...
weixin_33308985的博客
06-08 2368
前言此篇文章是基于Vue来分析一下从编辑好代码->打包->将dist文件夹放置到服务器上->访问该网址->页面呈现。此过程所涉及到的知识点，本篇很少涉及到具体的代码，主要是理论上的知识，如有错误，烦请各位在评论区指出。概念Vue-cli(快速建立开发环境的脚手架)webpack(模块打包工具)Vue-loader(将单文件组件.vue解析成JS代码形式)单页面应用与多页面应...
uniapp 解析后端返回的 html
不想起床
07-01 6528
需求 由于6.18活动到期，需要修改文案信息，这就得前后端都得再跑一遍流程。为了减少人员使用，所以将前端静态界面，全部给后端，然后将后端返回的数据，前端通过特定格式来解析。这样，以后单纯文案的修改，就不需要前端的参与了！！！ 大致思路 将所有html，和写在行内的样式，给后端 下载 uParse-master 并且引入，注册组件 用注册的组件，来渲染后端返回的数据 具体操作实例 将之前view，外部样式。全部改成div，行内样式, 然后给后端 之前： 现在 下载 uParse-master 地
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
10-16
今天小编就为大家分享一篇Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
前端传入代码 带 html 文本,需要用 该方法进行处理
夏安的博客
08-28 468
前端传入代码 带 html 文本,需要用 该方法进行处理 String jsonData = StringEscapeUtils.unescapeHtml(getRequest().getParameter("jsonData")); List<PyfakcxxModel> modelList = JSON.parseArray(jsonData, Pyf...
10 Vue3中v-html指令的用法
源滚滚编程
12-19 3720
v-html主要是用来渲染富文本内容，比如评论信息，新闻信息，文章信息等。v-html是一个特别不安全的指令，因为它会将文本以HTML的显示进行渲染，一旦文本里面包含一些恶意的js代码，可能会导致整个网页发生崩溃。不过，v-html在渲染富文本的场景中，有着非常大的优势，所以在一些博客网站项目中，经常能够看到这个指令的出现。
vue给组件传html,如何将 html 模板作为道具传递给 Vue 组件
weixin_33941859的博客
06-29 1374
Vue 渲染器将组件视为静态组件，因此在将它们放入 DOM 后，它们根本不会改变(这就是为什么如果您检查 DOM，您会在.但即使他们真的改变了，那也无济于事。只是因为s 中的HTML 元素不会成为它们的值。您必须设置TextArea 元素的value属性才能使其工作。总之，不要绝望。这是可行的，解决上述问题所需的一切就是使用一个小的辅助组件。有许多可能的方法来实现这一点，下面显示了两种。它们的主要...
前端处理数据常用的方法
m0_63304840的博客
11-17 2023
处理数据的一些方法
vue快速入门(三) 之 v-text v-html
weixin_44415928的博客
03-16 438
1.v-text 可以看出来v-text的作用就是把后边的变量message的值添加到div的文本内容部分,功能类似于在div文本处写{{message}} 我们发现v-text是吧标签里边的所有文本全都替换,而{{}}则不会,这是区别 另外这两个都支持字符串的拼接 2.v-html 注意到这次我们在message里边加上了h1标签,分别用v-text和v-html来做测试 发现v...
VUE中将HTML格式转换为纯文本
XIE_CHAO的博客
04-19 4896
js中代码： methods:{ ToText(HTML) { var input = HTML; return input.replace(/<(style|script|iframe)[^>]*?>[\s\S]+?<\/\1\s*>/gi,'').replace(/<[^>]+?>/g,'').replac...
Vue基础-文本显示，v-html插入html代码
cxu123321的博客
10-21 2651
Vue基础-文本显示，v-html插入html代码 1. 显示内容 {{}} <div id="app"> <p>{{ message }}</p> </div> <script> new Vue({ el: '#app', //el是选择元素的挂载节点，这里#是加父节点id data: { //赋值 message: 'Hello Vue.js!' } }) </scr...
vue中html显示的问题
warrah 南极狼
03-27 4503
描述内容是用富文本框编辑的，实际的内容如下： 实际这里的多行省略是没有效果的，因为他不是纯文本，而是html标签。 <div class="main" v-html="book.description"> </div> .main{ height:140px; font-size: 8px; text-overflow: -o-ellipsis-lastline; // 多行省略
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值