Vue中插入HTML代码的方法


Posted in Javascript onSeptember 21, 2018

我们需要吧<p>Hello World</p>插入到<p>My name is Pjee</p>应该如何做?

一、使用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很少用到,那么这个东西就更少有人使用到了

如果现在还有一段<p>How are you?</p>需要我们插入到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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS网络游戏-(模拟城市webgame)提供的一些例子下载
Oct 14 Javascript
Prototype Date对象 学习
Jul 12 Javascript
Extjs学习过程中新手容易碰到的低级错误积累
Feb 11 Javascript
从零开始学习jQuery (十) jQueryUI常用功能实战
Feb 23 Javascript
javascript编写贪吃蛇游戏
Jul 07 Javascript
JS组件Bootstrap实现图片轮播效果
May 16 Javascript
Angular ui.bootstrap.pagination分页
Jan 20 Javascript
JavaScript实现的数字与字符串转换功能示例
Aug 23 Javascript
vue2.0 elementUI制作面包屑导航栏
Feb 22 Javascript
layui的表单提交以及验证和修改弹框的实例
Sep 09 Javascript
vue基础知识--axios合并请求和slot
Jun 04 Javascript
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
node.js调用C++函数的方法示例
Sep 21 #Javascript
Vue中Quill富文本编辑器的使用教程
Sep 21 #Javascript
vue单页应用在页面刷新时保留状态数据的方法
Sep 21 #Javascript
vue如何安装使用Quill富文本编辑器
Sep 21 #Javascript
vue中设置、获取、删除cookie的方法
Sep 21 #Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
Sep 21 #Javascript
vue富文本编辑器组件vue-quill-edit使用教程
Sep 21 #Javascript
You might like
PHP Stream_*系列函数
2010/08/01 PHP
Function eregi is deprecated (解决方法)
2013/06/21 PHP
推荐20家国外的脚本下载网站
2011/04/28 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
2013/08/14 Javascript
iframe里的页面禁止右键事件的方法
2014/06/10 Javascript
下拉框select的绑定示例
2014/09/04 Javascript
JavaScript String 对象常用方法详解
2016/05/13 Javascript
jQuery 调用WebService 实例讲解
2016/06/28 Javascript
javascript 将共享属性迁移到原型中去的实现方法
2016/08/31 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
简单谈谈关于 npm 5.0 的新坑
2017/06/08 Javascript
JavaScript用二分法查找数据的实例代码
2017/06/17 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
2017/09/14 Javascript
js推箱子小游戏步骤代码解析
2018/01/10 Javascript
Vue使用Three.js加载glTF模型的方法详解
2020/06/14 Javascript
Vue组件间数据传递的方式(3种)
2020/07/13 Javascript
[01:22:28]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第一场 1月18日
2021/03/11 DOTA
Python安装第三方库及常见问题处理方法汇总
2016/09/13 Python
python查看微信好友是否删除自己
2016/12/19 Python
Python3简单实例计算同花的概率代码
2017/12/06 Python
基于Python的文件类型和字符串详解
2017/12/21 Python
Python在groupby分组后提取指定位置记录方法
2018/04/20 Python
如何利用Anaconda配置简单的Python环境
2019/06/24 Python
33个Python爬虫项目实战(推荐)
2019/07/08 Python
Django 路由层URLconf的实现
2019/12/30 Python
200行python代码实现贪吃蛇游戏
2020/04/24 Python
css3 transform及原生js实现鼠标拖动3D立方体旋转
2016/06/20 HTML / CSS
LocalStorage记住用户和密码功能
2017/07/24 HTML / CSS
网上签名寄语活动留言
2014/01/18 职场文书
城市轨道交通工程职业规划书范文
2014/01/18 职场文书
安全生产大检查方案
2014/05/07 职场文书
党员个人对照检查材料思想汇报
2014/09/16 职场文书
正风肃纪剖析材料
2014/09/30 职场文书
单位介绍信格式范文
2015/05/04 职场文书
热血教师观后感
2015/06/10 职场文书
2016年寒假生活小结
2015/10/10 职场文书