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 相关文章推荐
JavaScript多线程的实现方法
May 08 Javascript
JavaScript中的property和attribute介绍
Dec 26 Javascript
jQuery Tools Dateinput使用介绍
Jul 14 Javascript
js保留小数点后几位的写法
Jan 03 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
Aug 28 Javascript
JQuery实现网页右侧随动广告特效
Jan 17 Javascript
关于Javascript回调函数的一个妙用
Aug 29 Javascript
如何抽象一个Vue公共组件
Oct 17 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
Jul 05 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
Aug 06 Javascript
vue-cli随机生成port源码的方法
Sep 02 Javascript
React实现类似淘宝tab居中切换效果的示例代码
Jun 02 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
FleaPHP的安全设置方法
2008/09/15 PHP
PHP自动选择 连接本地还是远程数据库
2010/12/02 PHP
php设计模式 Observer(观察者模式)
2011/06/26 PHP
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
PHP中功能强大却很少使用的函数实例小结
2016/11/10 PHP
[原创]php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法
2016/11/23 PHP
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
jquery垂直公告滚动实现代码
2013/12/08 Javascript
jquery实现点击文字可编辑并修改保存至数据库
2014/04/15 Javascript
JS实现OCX控件的事件响应示例
2014/09/17 Javascript
JavaScript动态创建div等元素实例讲解
2016/01/06 Javascript
解析javascript瀑布流原理实现图片滚动加载
2016/03/10 Javascript
Web打印解决方案之证件套打的实现思路
2016/08/29 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
2016/12/17 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
80%应聘者都不及格的JS面试题
2017/03/21 Javascript
Node.js使用Koa搭建 基础项目
2018/01/08 Javascript
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
Vue响应式原理Observer、Dep、Watcher理解
2019/06/06 Javascript
js实现购物车商品数量加减
2020/09/21 Javascript
[05:56]第十六期——新进3大C之小兔基
2014/06/24 DOTA
Python常用的日期时间处理方法示例
2015/02/08 Python
Python functools模块学习总结
2015/05/09 Python
python实现网页自动签到功能
2019/01/21 Python
Python OpenCV实现视频分帧
2019/06/01 Python
解决py2exe打包后,总是多显示一个DOS黑色窗口的问题
2019/06/21 Python
PyQt5响应回车事件的方法
2019/06/25 Python
分享PyCharm的几个使用技巧
2019/11/10 Python
Python+unittest+DDT实现数据驱动测试
2020/11/30 Python
Python常用断言函数实例汇总
2020/11/30 Python
工伤赔偿协议书范本
2014/04/15 职场文书
行政司机岗位职责
2015/04/10 职场文书
2015年街道除四害工作总结
2015/05/15 职场文书
详解MySQL 联合查询优化机制
2021/05/10 MySQL