Vue中插入HTML代码的方法

我们需要吧Hello World插入到My name is Pjee应该如何做？

一、使用v-html

v-html:更新元素的 innerHTML

const text = `<p>Hello World</>`
<p>My name is Pjee<p v-html='text'></p>
</p>

注意：你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

二、渲染函数

渲染函数：这是通过对VNode（虚拟DOM）的操作来生成

text(){render:(h)=>{h('div', [h('p', 'Hello'),' world!'])}
}
<p>Hello World{{this.text()}}</p>

三、JSX

JSX：这个方法在React使用最为广泛，但是Vue中使用需要安装Babel插件

text(){return (<p>Hello World</p>)
}
<p>Hello World{{this.text()}}</p>

四、domPropsInnerHTML

domPropsInnerHTML：如果说JSX在vue很少用到，那么这个东西就更少有人使用到了

如果现在还有一段How are you?需要我们插入到Hello World中，我们就可以使用这种方法

const newText = '<p>How are you?</p>'
text(){return (<p>Hello World<p domPropsInnerHTML={this.newText}></p></p>)
}
<p>Hello World{{this.text()}}</p>

Vue中插入HTML代码的方法相关推荐

PPT 中插入域代码公式的方法
PPT 中插入域代码公式的方法插入对象,选择 Word * Document,或 OpenDocument 都可以: 在新打开的页面中,选择插入文档部件,再选择域代码: 在域代码选项中, ...
vue中实现打印功能的方法与注意事项
vue中实现打印功能的方法与注意事项一.使用方法: 1. 在HTML中 2. 在VUE项目中二.问题总结 1. 设置打印方向 2. 设置打印高度 1. 单张打印 2. 循环打印 3. 获取打印操作 ...
【教程】在PPT中插入高亮代码段，超简单直接复制粘贴
[前言]本文讲解直接在PPT中插入高亮代码段的方法. 最简单的方法其实就是直接复制粘贴,没错,就是复制粘贴!关键就在于粘贴后选择"保留源格式". 1. 选择合适代码源同样的一段代 ...
如何在html中定义字段文字,如何在自定义字段中插入html代码和标签|动易Cms
如何在自定义字段中插入html代码和标签在自定义字段里面直接插入html代码还有标签是解析不出来的. 但是我们可以通过以下的方法来实现. 1. 添加一个自定义字段.命名为MY_zdy 修改字段 ...
created写法_在vue中created、mounted等方法使用小结
created:html加载完成之前,执行.执行顺序:父组件-子组件 mounted:html加载完成后执行.执行顺序:子组件-父组件 methods:事件方法执行 watch:watch是去监听一个 ...
在Latex中插入Python代码
这里指的插入是指最终能在生成的pdf中显示高亮的Python代码. 在Latex中插入Python代码,需要一个第三发的宏包pythonhighlight: https://github.com/ol ...
在vue中methods互相调用的方法
在vue中methods互相调用的方法转载于:https://www.cnblogs.com/macT/p/10212878.html
latex附录中放python代码_在Latex中插入Python代码
这里指的插入是指最终能在生成的pdf中显示高亮的Python代码. 在Latex中插入Python代码,需要一个第三发的宏包pythonhighlight: https://github.com/ol ...
jsp中向数据库中插入当前时间的方法精确到秒
jsp中向数据库中插入当前时间的方法精确到秒 1. 如果要插入的日期是当前时间,最简单的办法就是利用oracle自带的日期函数:sysdate. 建表时,将字段默认值声明为sysdate,如下: cr ...