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

今天整理之前做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打印出来，以便大家理解，这是打印出来的结果

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

总结

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

赞 (0)

相关推荐

  • vue获取dom元素注意事项

    mounted(){ setTimeout(()=>{ this.contentToggle(); },1000) }, methods:{ contentToggle(){ console.log(this.$refs.bodyFont.offsetHeight); } } vue想要获取dom元素的高,一般情况下我们都可以想到写在mounted函数里,即dom加载完再获取,但是结果并不如我们所想,又想到用一个 this.$nextTick(()=>{ //函数 }) 来获取,发现根本没用啊

  • vue获取DOM元素并设置属性的两种实现方法

    这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,给相应的元素加ref="name" 然后再this.$refs.name获取到该元素 注意:在获取相应元素之前,必须在mount钩子进行挂载,否则获取到的值为空, 如果是给子组件加id并修改自定义属性,则直接会加载改子组件对应的外层div上,并不会改变该子组件原本的自定义属性的值 如果给子组件

  • vue动态生成dom并且自动绑定事件

    用jquery的时候你会发现,页面渲染后动态生成的dom,在生成之前的代码是没办法取到相应对象的,必须重新获取.但是vue基于数据绑定的特性让它能生成的时候直接绑定数据. html: <div id="app"> <table v-for="table in tables"> <tr v-for="row in table.row"> <td style="width:80px;float:le

  • Vue解析带html标签的字符串为dom的实例

    1.场景描述 如上接口中,content字段: content:"<p>这是内容</p>" 需要在网页中现实如下效果: 2.解决方法 v-html <div class="blog-content" v-html="curblog.content"> </div> v-html可以操作元素中的HTML标签,效果类似于jquery里的 .html()方法,在不安全的页面比如注册或者登陆页面千万不要用这

  • vue指令以及dom操作详解

    "AngularJS 通过被称为 指令 的新属性来扩展 HTML.AngularJS 通过内置的指令来为应用添加功能.AngularJS 允许你自定义指令." 这是我最初接触"指令"这个词.还记得那时候,ng大行其道的时候,我特别好奇怎么给一个div加一个"ng-app" 就能解决这么多问题. 后来随着前端工作的深入,我用了jq的data-attr并且学会了jq的插件使用.但,这这并不能让我把它"指令"联想到一块,后来插件需要

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

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

  • Python 将json序列化后的字符串转换成字典(推荐)

    一般而言下面的就可以完成需求了. def convertToDic(data): jsonDic=json.loads(data) return dict(jsonDic) 但实际应用中可能会出现一些问题,因此有时候也可以增加一些异常处理: def convertToDic(data): try: jsonDic=json.loads(data) except json.decoder.JSONDecodeError: jsonDic={} try: dic=dict(jsonDic) exce

  • python函数中将变量名转换成字符串实例

    考虑到在日常中,常常需要对模型指标输出,但涉及多个模型的时候,需要对其有标示输出,故需要将模型变量名转换成字符串. 看到的基本方法有两种: 一.方法层面: 方法1(函数内推荐): def namestr(obj, namespace): return [name for name in namespace if namespace[name] is obj] print(namestr(lr_origin,globals()),'\n', namestr(lr_origin,globals())

  • python 将字符串转换成字典dict的各种方式总结

    1)利用eval可以将字典格式的字符串与字典户转 >>>mstr = '{"name":"yct","age":10}' 转换为可以用的字典: >>>eval(mstr), type( eval(mstr) ) {"name":"yct","age":10}, dict 2).JSON到字典转化: >>>dictinfo = json

  • python将字符串转换成json的方法小结

    最近在工作中遇到了一个小问题,如果要将字符串型的数据转换成dict类型,我第一时间就想到了使用json函数.但是里面出现了一些问题 1.通过json来转换: In [1]: import json In [2]: mes = '{"InsId": 2, "name": "lege-happy", "CreationTime": "2019-04-23T03:18:02Z"}' In [3]: mes_to_

  • PHP实现将base64编码字符串转换成图片示例

    PHP实现将base64编码字符串转换成图片示例

    本文实例讲述了PHP实现将base64编码字符串转换成图片.分享给大家供大家参考,具体如下: 步骤: 1. 获取base64文件: 复制代码 代码如下: $image="data:image/jpg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRw

  • 解决java字符串转换成时间Unparseable date出错的问题

    今天在写代码的时候,在将字符串转换成时间的时候,出现了这样的问题. java.text.ParseException: Unparseable date: "2017-1-1 00:00:00" DateFormat df = new SimpleDateFormat("yyyy-MM-dd"); Date start = df.parse(startTime); Date stop = df.parse(stopTime); long timeSpan = sto

  • 使用Gson将字符串转换成JsonObject和JsonArray

    目录 Gson将字符串转JsonObject和JsonArray 以下均利用Gson来处理 JSONObject与JSON互转 引入 jar , 此处引入 com.alibaba.fastjson 版本的jar包 建立测试类对象 转换 Gson将字符串转JsonObject和JsonArray 以下均利用Gson来处理 1.将bean转换成Json字符串: public static String beanToJSONString(Object bean) {         return ne

  • python将字符串转换成数组的方法

    python将字符串转换成数组的方法.分享给大家供大家参考.具体实现方法如下: #----------------------------------------- # Name: string_to_array.py # Author: Kevin Harris # Last Modified: 02/13/04 # Description: This Python script demonstrates # how to modify a string by # converting it

  • js 字符串转换成数字的三种方法

    方法主要有三种 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者把值转换成浮点数.只有对String类型调用这些方法,这两个函数才能正确运行:对其他类型返回的都是NaN(Not a Number). 一些示例如下: 复制代码 代码如下: parseInt("1234blue");   //returns   1234parseInt("0xA");  

随机推荐