在这里我们可以想将一个 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 元素并且添加了进来
来源: https://www.cnblogs.com/bai1218/p/10089706.html