vue解析字符串带有html标签,Vue解析带html标签的字符串为dom的实例

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

1.场景描述

如上接口中，content字段：

content:"

这是内容

"

需要在网页中现实如下效果：

2.解决方法

v-html

v-html可以操作元素中的HTML标签，效果类似于jquery里的 .html()方法，在不安全的页面比如注册或者登陆页面千万不要用这个指令。因为会出现XSS攻击。所以千万不要用。官网提示：

在不安全的页面比如注册或者登陆页面千万不要用这个指令。因为会出现 XSS攻击。所以千万不要用。

以上这篇Vue解析带html标签的字符串为dom的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

时间： 2019-11-12

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

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

用jquery的时候你会发现,页面渲染后动态生成的dom,在生成之前的代码是没办法取到相应对象的,必须重新获取.但是vue基于数据绑定的特性让它能生成的时候直接绑定数据. html:

在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: dom元素内部内容是动态的,重置数据后直接获取宽高总是不准确: this.$refs.editor[0].offsetHeight; 原因:重置数据后获取dom元素宽高时,dom元素还未渲染完毕: 解决方法:利用Vue.nectTick(callback) this.$nextTick(() => { this.$refs.editor[0].offsetHeight; }) Vue.nectTick() 是在下次DOM更新循环结束之后执行延迟回调 补充知识:vue 获取 指定元素的高度宽度等( 在操作页面滚动和动画时经常会获取 DOM 元素的绝对位置,例如 本文 左侧的悬浮导航,当页面滚动到它以前会正常地渲染到文档流中,当页面滚动超过了它的位置,就会始终悬浮在左侧. 本文会详述各种获取 DOM 元素绝对位置 的方法以及对应的兼容性.关于如何获取 DOM 元素高度和滚动高度,请参考视口的宽高与滚动高度 一文. 概述 这些是本文涉及的 API 对应的文档和标准,供查阅: API 用途 文档 标准 offsetTop 相对定位容器的位置 MDN CSSOM View Module clien 1.原生js操作dom const dom = getElementById('box') 2.vue官方方法:ref vue中的ref是把当前dom元素 " 抽离出来 " ,只要通过 this.$refs就可以获取到 < div class="set" ref="up"> .set是我们要操作的dom对象,它的ref是 up @click="Alert" 给父元素一个点击事件, 接下来我们来编写这个方法 meth vue1.*版本中 在标签中加上el='dom',然后在代码中this.$els.dom这样就拿到了页面元素 例如: 你好 让你好的颜色显示为红色:this.$els.my-box.style.color = 'red' vue2.*版本中 在标签中加上ref='dom',然后在代码中this.$refs.dom这样就拿到了页面元素 例如: 你好 示例如下: 废话不多说,直接上代码 (function (window) { var arr = []; var VP = function (selector, context) { return new VP.fn.init(selector, context); } VP.fn = VP.prototype = { constructor: VP, init: function (selector, context) { var _document = window.document, elem, m 介绍 解决各个浏览器下 获取dom 元素的 位置 兼容性 ie 6 7 8 firefox 3.6 chrome 4.0 目前只测试了这几个浏览器 作者 Jelle · lu QQ:271412542 Email:idche@qq.com blogs:http://www.cnblogs.com/idche/ 源码说明 jquery 源码给我很大帮助,也用到一个叫 布鲁斯 · 李 的同学的源码,当然更多资源来源于网络. 功能说明 // jelle(elem) 对象 elem传递对象ID 或者 d