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

一、使用v-html

v-html:更新元素的 innerHTML

1

2

3

4

5

const text = `<p>Hello World</>`

<p>

  My name is Pjee

  <p v-html='text'></p>

</p>

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

二、渲染函数

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

1

2

3

4

5

6

7

8

9

10

11

12

text(){

  render:(h)=>{

   h(

     'div',

     [

      h('p', 'Hello'),

      ' world!'

     ]

    )

  }

}

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

三、JSX

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

1

2

3

4

text(){

  return (<p>Hello World</p>)

}

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

四、domPropsInnerHTML

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

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

1

2

3

4

5

6

7

8

9

10

const newText = '<p>How are you?</p>'

text(){

 return (

  <p>

   Hello World

   <p domPropsInnerHTML={this.newText}></p>

  </p>

 )

}

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

转载于： https://www.jb51.net/article/147832.htm

Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

【FAQ】HarmonyOS SDK 闭源开放能力 —IAP Kit（2）

avatar 华为云开发者联盟
cover

三头六臂战力增倍——openGauss5.0.0一主两备扩容至一主三备

avatar 华为云开发者联盟
cover

华为云IoT开源专家实践分享：开源让物联网平台更开放易用

avatar 华为云开发者联盟