vue中将html字符串转换成html后遇到的问题小结


Posted in Javascript onDecember 10, 2018

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

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

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

<div v-html="'<p>渴望成为大牛的男人</p>'"></div>





//页面上成功渲染出了我们想要的p标签,但同时它的外围也被一个div标签包裹着
<template v-html="'<p>渴望成为大牛的男人</p>'"></template>



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

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

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

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

为什么我要说scoped这个属性,因为在你加了scroped之后,当你引用一些第三方组件,比如swiper,当你想要去覆盖它的样式的时候,你会发现覆盖不了,那么我们后来通过v-html引入的html元素肯定也逃不掉,这个时候我们可以通过一种特殊的方式,穿透scoped,比如这样:

<style scoped>
  >>>需要穿透的类名 {
    样式
  }
</style>

嗯对,就是这个姿势,我们使用>>>就可以实现一个穿透效果,让我们在使用scoped的情况下,去修改其他组件的样式,还有另外一种方法就是你可以把需要穿透的样式写到另一个style标签中,不加scoped,这样也可以,看你个人需求。

接下来我们解决第二个问题,同时我们把这个问题转化为如何将一个html字符串转换为html元素:

在这里我们可以想将一个html字符串转换为html元素的话,我想到的办法就只能进行DOM操作了,在vue中,要进行DOM操作的话,我们可以使用自定义指令,如果有小伙伴对自定义指令不了解的话,可以去vue的官方文档先看下自定义指令是什么,官网链接:https://cn.vuejs.org/v2/guide/custom-directive.html

解决这个问题的大致思路是这样的:我们可以在要加入这个html字符串的元素绑定一个自定义指令,我们在data中定义一个htmlStr变量用来存储字符串,绑定到我们的自定义指令上,然后在我们这个自定义指令中我们可以获取到这个当前这个元素的dom节点还有我们需要解析的字符串,我们通过原生js的innerHtml方法将字符串渲染到页面上即可:

data(){
    return {
      htmlStr:'<p>渴望成为大牛的男人</p>'   //你可以把后端html字符串数据来赋值给htmlStr
    }
  },
<main v-exchangeHtml:foo='htmlStr'>   //定义自定义指令
//全局注册自定义指令
Vue.directive('exchangeHtml',{   
  bind: function(el,foo){
   console.log(el,foo)
   el.innerHTML += foo.value
 }
})

我把el和foo打印出来,以便大家理解,这是打印出来的结果

vue中将html字符串转换成html后遇到的问题小结

自此,我们就完成了直接将html字符串转换成我们需要的html元素并且添加了进来

总结

以上所述是小编给大家介绍的vue中将html字符串转换成html后遇到的问题小结 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js实现DIV的一些简单控制
Jun 04 Javascript
js异步加载的三种解决方案
Mar 04 Javascript
JS控制图片等比例缩放的示例代码
Dec 24 Javascript
JS实现跟随鼠标立体翻转图片的方法
May 04 Javascript
JQuery异步加载PartialView的方法
Jun 07 Javascript
Angular.JS学习之依赖注入$injector详析
Oct 20 Javascript
vue Render中slots的使用的实例代码
Jul 19 Javascript
详解微信小程序中的页面代码中的模板的封装
Oct 12 Javascript
详解为Bootstrap Modal添加拖拽的方法
Jan 05 Javascript
react配置antd按需加载的使用
Feb 11 Javascript
JavaScript实现筛选数组
Mar 02 Javascript
vue @ ~ 相对路径 路径别名设置方式
Jun 05 Vue.js
vue的.vue文件是怎么run起来的(vue-loader)
Dec 10 #Javascript
Bootstrap 实现表格样式、表单布局的实例代码
Dec 09 #Javascript
Bootstrap 按钮样式与使用代码详解
Dec 09 #Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
Dec 09 #Javascript
vue form check 表单验证的实现代码
Dec 09 #Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
Dec 09 #Javascript
vue打包之后生成一个配置文件修改接口的方法
Dec 09 #Javascript
You might like
隐藏X-Space个人空间下方版权方法隐藏X-Space个人空间标题隐藏X-Space个人空间管理版权方法
2007/02/22 PHP
snoopy 强大的PHP采集类使用实例代码
2010/12/09 PHP
php使用数组填充下拉列表框的方法
2015/03/31 PHP
Yii2.0框架模型多表关联查询示例
2019/07/18 PHP
php5对象复制、clone、浅复制与深复制实例详解
2019/08/14 PHP
window.open()弹出居中的窗口
2007/02/01 Javascript
javascript &amp;&amp;和||运算法的另类使用技巧
2009/11/28 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
2011/09/15 Javascript
基于jQuery的简单九宫格实现代码
2012/08/09 Javascript
javascript常用函数归纳整理
2014/10/31 Javascript
JavaScript代码复用模式详解
2014/11/07 Javascript
JS实现向表格行添加新单元格的方法
2015/03/30 Javascript
JavaScript中的replace()方法使用详解
2015/06/06 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
2016/08/24 Javascript
JS简单随机数生成方法
2016/09/05 Javascript
JavaScript中undefined和null的区别
2017/05/03 Javascript
浅谈Vue的加载顺序探讨
2017/10/25 Javascript
Vue 之孙组件向爷组件通信的实现
2019/04/23 Javascript
使用Typescript和ES模块发布Node模块的方法
2020/05/25 Javascript
python数据结构之二叉树的遍历实例
2014/04/29 Python
Python守护进程用法实例分析
2015/06/04 Python
非递归的输出1-N的全排列实例(推荐)
2017/04/11 Python
Python3利用Dlib实现摄像头实时人脸检测和平铺显示示例
2019/02/21 Python
使用Python进行中文繁简转换的实现代码
2019/10/18 Python
django 简单实现登录验证给你
2019/11/06 Python
给Django Admin添加验证码和多次登录尝试限制的实现
2020/07/26 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
俄罗斯品牌服装和鞋子在线商店:BRIONITY
2020/03/26 全球购物
八年级英语教学反思
2014/01/09 职场文书
自我鉴定注意事项
2014/01/19 职场文书
计算机毕业生自荐信
2014/06/12 职场文书
党的群众路线教育实践活动个人对照检查材料(教师)
2014/11/04 职场文书
先进教育工作者事迹材料
2014/12/23 职场文书
2015年全国助残日活动方案
2015/05/04 职场文书
一行Python命令实现批量加水印
2022/04/07 Python