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

后台传过来 一个带标签的字符串  前端可以直接转换成html格式的，可是在vue中怎么办呢

在这个DEMO中，item.content所带的字符串将被转换为HTML代码。

注意：使用了v-html的标签中的内容将被item.content替代：

<div class="item" v-for="item in socialArray">
 <dl v-html="item.content">
  {{item.content}}
 </dl>
</div>

总结

以上所述是小编给大家介绍的Vue 将后台传过来的带html字段的字符串转换为 HTML，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

您可能感兴趣的文章:

  • Vue网页html转换PDF（最低兼容ie10）的思路详解
赞 (0)

相关推荐

  • Vue网页html转换PDF（最低兼容ie10）的思路详解

    HTML转PDF: 1.页面底层实现--Vue:最低兼容ie10 2.实现思路: 1> 使用html2canvas.js将网页转换为图片 2> 使用jsPdf.debug.js将canvas生成的图片转换为pdf文件 具体实现: 要这样实现首先要引入两个插件: html2canvas.js jsPdf.debug.js 注: 因为ie10在canvas截图时候会出现部分样式丢失的情况,所以在代码中有部分修改了页面的样式 所以建议在做截图的时候,将页面代码复制一份到隐藏域,在隐藏域里面做修改,这

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

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

    后台传过来 一个带标签的字符串  前端可以直接转换成html格式的,可是在vue中怎么办呢 在这个DEMO中,item.content所带的字符串将被转换为HTML代码. 注意:使用了v-html的标签中的内容将被item.content替代: <div class="item" v-for="item in socialArray"> <dl v-html="item.content"> {{item.content}}

  • Vue向后台传数组数据,springboot接收vue传的数组数据实例

    用axios前台代码: let menus_id = this.$refs.tree.getCheckedKeys(); //菜单id [1,2,3]数组 this.$axios.get("/api/epidemic/roleMenus/addBath1",{params:{roleid:this.roleid,menusid:menus_id}}).then((result)=>{ console.log(result) }) 后台代码: @RequestMapping(&qu

  • 解决vue下载后台传过来的乱码流的问题

    解决vue下载后台传过来的乱码流的问题

    后台返回的乱码流 解决办法: 请求方式用的是axios,主要加关键的 {responseType: 'blob'} axios封装 export function postDownload(url, data) { return new Promise((resolve, reject) => { instance.post(url,data,{responseType: 'blob'}).then(response => { resolve(response); }, err => {

  • python 如何将带小数的浮点型字符串转换为整数

    以下内容在python中完全可以接受: 1.将整数的字符串表示形式传递给 int 2.将float的字符串表示形式传递给 float 但是,如果你将float型的字符串传递给int将会得到错误. >>> int('5') 5 >>> float('5.0') 5.0 >>> float('5') 5.0 >>> int(5.0) 5 >>> float(5) 5.0 >>> int('5.0') T

  • Ajax向后台传json格式的数据出现415错误的原因分析及解决方法

    Ajax向后台传json格式的数据出现415错误的原因分析及解决方法

    问题描述: ajax往后台传json格式数据报415错误,如下图所示 页面代码 function saveUser(){ var uuId = document.getElementById("uuid").value; var idCard = document.getElementById("idCard").value; alert(uuId+idCard); // var result = new Object(); // result.uuId = uuI

  • Vue通过URL传参如何控制全局console.log的开关详解

    前言 最近在学习vue,发现了一个问题网上相关的信息很少,所以想着总结下,本文主要给大家介绍了关于Vue通过URL传参来控制全局console.log开关的相关内容,分享出来供大家参考学习,下面话不多说了,来随着小编一起看看详细的介绍吧. 实现方法如下: 如果你的项目中console.log了很多信息,但是发到生产环境上又不想打印这些信息,这时候就需要设置一个全局变量,如:debug, 用正则匹配一下参数: const getQueryStr = (name) => { var reg = ne

  • vue iView 上传组件之手动上传功能

    基于 Vue 的 UI 组件库现在已经有很多了,尤其是移动端的.现在又多了一个 iView . iView 主要服务于 PC 界面的中后台业务,是一套高质量的开源 UI 组件库,先上地址: https://github.com/iview/iview 官网是: https://www.iviewui.com/ 特性 使用单文件的 Vue 组件化开发模式 基于 npm + webpack + babel 开发,支持 ES2015 高质量.功能丰富 友好的 API ,自由灵活地使用空间 详细.友好的

  • layui文件上传控件带更改后数据传值的方法

    1,文件上传控件开启 2,before内添加方法,以json格式存储数据.数据以对象形式存在,切对象格式不能直接传到后台,所以转化为json格式再进行传送. 3,后台String接收param参数,转为json,直接通过get方法取值保存 后台代码: 以上这篇layui文件上传控件带更改后数据传值的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • axios+Vue实现上传文件显示进度功能

    axios+Vue实现上传文件显示进度功能

    一,前言 最近在用Vue,然后上传文件时需要显示进度,于是网上搜了一下,经过自己实测终于也弄明白了 二,效果 三,代码 HTML代码 <div id="app"> <h4>上传文件:</h4> <p class="input-zone"> <span v-if="filename">{{filename}}</span> <span v-else>+请选择文件上传

  • vue图片上传组件使用详解

    vue图片上传组件使用详解

    vue图片上传组件,供大家参考,具体内容如下 最近在做项目的时候顺便补充了一下公司项目的公共组件库,刚刚手头事情告一段落,就来做个笔记. 首先来看看最终效果 1.不允许删除 2.允许用户删除(显示删除按钮) 实现的效果就是上图显示内容 接下来说说组件布局那部分直接上代码了 <template> <div class="uploadImg"> <div class="upload-content"> <div class=&q

随机推荐