vue把html标签转换为字符串,vue中将html字符串转换成html后遇到的问题小结

最新推荐文章于 2023-02-27 16:28:03 发布
VIP文章 最新推荐文章于 2023-02-27 16:28:03 发布
阅读量2.1k 收藏
点赞数
文章标签： vue把html标签转换为字符串

今天整理之前做vue项目时遇到的一些问题，发现了当时遇到的一个很小但是又会引出很多问题的一个问题(总之就是很有意思，听我慢慢给你到来)，这个问题就是当时处理后端数据时，如何将后端返回来的字符串转换成html标签，其实根据vue官网的一个v-html方法是不是觉得很简单，当时我也是这样想的，可是我发现了几个问题(官网给出的动态渲染任意 HTML 容易导致 XSS 攻击的问题我就不说了，在这里我只是用它来渲染数据)：

第一，当我用v-html将后端字符串转换成了html标签后，发现我在那个字符串中解析出来的html里面设置的样式没有加上；

第二，当我们使用v-html的时候，是会自动生成一个div标签的，有时候这个小小的div标签可能会影响到我们的布局，这个时候你会想到用template来替代div不就完事了，可是很不幸，给出我试验后的结果让你看看吧

　　　　　　　　//页面上并没有出现我们想要的这个p标签

有没有发现一个小小的需求就会带来很多意想不到的问题，让我不禁感叹，代码的世界真的是神奇啊，废话不多说，接下来我给出这两个问题的解法

我们先来解决第一个问题：

解决这个问题的开始，我们要先了解一下scoped，在vue中，当你在一个style标签上加了scoped属性时，这个style标签内的样式将会被锁死在当前这个组件内，为的就是避免我们的样式出现混乱，假如说你的项目中如果每个style标签上都加了scroped这个属性，从某种意义上说就相当于实现了样式的模块化。

为什么我要说scoped这个属性，因为在你加了scroped之后，当你

最低0.47元/天 解锁文章
weixin_39822728
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VUE 截取字符串的方法
07-30
适合刚刚进入(JavaScript，Vue)编程领域的小白使用
将HTML格式的String转化为HTMLElement的实现方法
12-29
代码如下： <meta charset=UTF-8> <title>Insert title here</title> </head> <body> <div id=content></div> [removed] var el = document.createElement(div); el[removed] = ' <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>ti
vue内 HTML文本转换为纯字符文本(replace转换
weixin_47644222的博客
07-26 976
vue内 HTML文本转换为纯字符文本 //A就是需要转换的HTML片段 ToText(A){ var input = A; return input.replace(/<(style|script|iframe)[^>]*?>[\s\S]+?<\/\1\s*>/gi,'').replace(/<[^>]+?>/g,'').replace(/\s+/g,' ').replace(/ /g,' ').replace(/&g
使用v-html解析html标签（html标签为字符串形式）
weixin_44613757的博客
01-13 1846
Vue.js中提供了v-html这个指令，或者对数据使用{{{ data }}}三个大括号
Vue中字符串转换html代码方法
anze0204的博客
01-30 2204
最近使用支付功能调用支付宝接口，然后返回的form表单放在div里面，并没有转换成想要的html代码，而是将整个form表单的内容完整显示了出来，显然不是我们要的结果！ 最后查找了一下vue官网的绑定事件，发现可以用v-html来绑定 <div id="formStr" v-html="form_str">{{ form_str }}</div> ...
vue把html标签转换为字符串,vue学习—Convert HTML string to AST，如何将html字符串转换为ast数组结构...
weixin_42509894的博客
05-30 1364
获取html字符串首先在入口文件处，使用template属性或者el属性获取到需要解析的html字符串template1.html字符串，如Vue.component('alert-box', {template: `Error!`})2.如果值以 # 开始，则它将被用作选择符，并使用匹配元素的 innerHTML 作为模板el类型：string | Element通过el获取需要解析的模版exp...
html将数值型换为字符串,Vue JS中把其他类型转换成字符串的三种方法
weixin_34055902的博客
06-10 1252
转载自 https://www.cnblogs.com/zouhong/p/11792837.html1、toString()方法toString()方法返回的是相应值的字符串表现数值、布尔值、对象和字符串值都有toString()方法，但是null和undefined值没有这个方法例子：var age = 11;var str1 = age.toString(); /...
vue 中如何将 html 字符串转化为 html
青蛙king的博客
09-08 3323
问题还原： 解决方案：用 v-html。 <div class="proj_content">工作描述：<div v-html="item.proj_content"></div></div>
vue 将有html标签的字符串转换为HTML标签
喜大普奔
02-27 2904
将带有标签的字符串，转化为标签
vue中将html字符串转换成html后遇到的问题小结
10-17
主要介绍了vue中将html字符串转换成html后遇到的问题小结,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
将字符串转换成gb2312或者utf-8编码的参数(js版)
10-27
直接在url中传递中文参数时，读到的中文都是乱码，那么我们应该怎么将这些参数转换呢，接下来与大家分享下将字符串转换成utf-8或者gb2312编码的参数的技巧
Vue项目pdf(base64)转图片遇到的问题及解决方法
10-17
主要介绍了Vue项目pdf(base64)转图片遇到的问题及解决方法,需要的朋友可以参考下
vue组件 keep-alive 和 transition 使用详解
01-19
1.keep-alive ...include: 字符串或正则表达式。只有匹配的组件会被缓存。 exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。 // 组件 export default { name: 'test-keep-alive', data () {
多图表实现员工满意度调查数据分析python
04-22
员工满意度是指员工对于工作环境、待遇、职业发展和组织管理等方面的满意程度。它是衡量员工对工作的整体感受和情绪状态的重要指标。
2020届软件工程本科毕业生毕业设计项目.zip
04-22
2020届软件工程本科毕业生毕业设计项目
基于stm32平衡小车
04-22
平衡小车 基于stm32 平衡小车 基于stm32 平衡小车 基于stm32
c语言火车票订票管理源码.rar
04-22
c语言火车票订票管理源码.rar
施耐德PLC例程源码四台水泵的轮换
最新发布
04-22
施耐德PLC例程源码四台水泵的轮换提取方式是百度网盘分享地址
vue中将字符串转换为数字
06-06
在Vue中，将字符串转换为数字可以使用以下两种方法： 1. 使用JavaScript内置的Number()函数将字符串转换为数字 ``` <template> <div> <p>{{ num }}</p> </div> </template> <script> export default { data() { return { str: '123' } }, computed: { num() { return Number(this.str) } } } </script> ``` 在上面的例子中，我们在data中定义了一个名为str的字符串变量，然后通过computed属性定义了一个名为num的计算属性，使用Number()函数将字符串str转换为数字并返回。 2. 使用JavaScript内置的parseInt()函数将字符串转换为整数 ``` <template> <div> <p>{{ num }}</p> </div> </template> <script> export default { data() { return { str: '123' } }, computed: { num() { return parseInt(this.str) } } } </script> ``` 在上面的例子中，我们使用parseInt()函数将字符串str转换为整数并返回。需要注意的是，parseInt()函数只能将字符串转换为整数，而不能将字符串转换为浮点数。如果需要将字符串转换为浮点数，需要使用parseFloat()函数。 无论使用哪种方法，都需要确保将字符串转换为数字的过程是可靠的，否则可能会出现一些意外的bug。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值