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技巧--转义符&quot;\&quot;的妙用
Jan 09 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 Javascript
按钮接受回车事件的三种实现方法
Jun 06 Javascript
javascript中var的重要性分析
Feb 11 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
Sep 17 Javascript
原生Javascript插件开发实践
Jan 18 Javascript
原生js实现简单的Ripple按钮实例代码
Mar 24 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
Sep 14 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
Dec 24 Javascript
使用webpack构建应用的方法步骤
Mar 04 Javascript
借助云开发实现小程序短信验证码的发送
Jan 06 Javascript
JS轮播图的实现方法
Aug 24 Javascript
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
DOMXML函数笔记
2006/10/09 PHP
一个用php3编写的简单计数器
2006/10/09 PHP
php下通过伪造http头破解防盗链的代码
2010/07/03 PHP
详解js异步文件加载器
2016/01/24 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
2007/04/12 Javascript
通过判断JavaScript的版本实现执行不同的代码
2010/05/11 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
2015/04/14 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
2016/05/03 Javascript
Javascript中call,apply,bind方法的详解与总结
2016/12/12 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
2016/12/14 Javascript
JS实现淡入淡出图片效果的方法分析
2016/12/20 Javascript
javascript实现延时显示提示框效果
2017/06/01 Javascript
Angular.js自动化测试之protractor详解
2017/07/07 Javascript
vue watch监听对象及对应值的变化详解
2018/02/24 Javascript
vue.js数据绑定操作详解
2018/04/23 Javascript
node.js express框架简介与实现
2019/07/23 Javascript
[01:32]TI奖金增速竟因它再创新高!DOTA2勇士令状不朽珍藏Ⅰ饰品欣赏
2018/05/18 DOTA
[51:14]LGD vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
Python深入学习之上下文管理器
2014/08/31 Python
Cpy和Python的效率对比
2015/03/20 Python
Python 高级专用类方法的实例详解
2017/09/11 Python
启动targetcli时遇到错误解决办法
2017/10/26 Python
python中的字典操作及字典函数
2018/01/03 Python
对python当中不在本路径的py文件的引用详解
2018/12/15 Python
python保存字典和读取字典的实例代码
2019/07/07 Python
Python Tkinter Entry和Text的添加与使用详解
2020/03/04 Python
python 轮询执行某函数的2种方式
2020/05/03 Python
Keras设置以及获取权重的实现
2020/06/19 Python
PyTorch之nn.ReLU与F.ReLU的区别介绍
2020/06/27 Python
python代码能做成软件吗
2020/07/24 Python
HTML5 直播疯狂点赞动画实现代码 附源码
2020/04/14 HTML / CSS
一道Delphi上机题
2012/06/04 面试题
国贸专业毕业求职信
2014/06/11 职场文书
解析Java中的static关键字
2021/06/14 Java/Android