Vue指令之v-html

目录                     

1.v-html该怎么使用呢???

2.普通文本:

3.html结构:

4.总结:


v-html指令是设置innerHTML

1.v-html该怎么使用呢???

我们先在被vue实例挂载的标签div中,放入一个p标签,在p标签内部写入v-html指令,<p v-html="name"></p> ,那么name的值哪里来呢?

这就需要在data中去定义了,对于普通的文本和v-text没有什么差异,但是对于html结构就不一样了,它就会被解析出来,如下代码:

2.普通文本:

3.html结构:

4.总结:

  • v-html 指令的作用:设置元素的innerHTML
  • 内容中有html结构会被解析为标签
  • v-text指令无论内容是什么,只会解析为文本
  • 解析文本使用v-text,需要解析html结构使用v-html 

 

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐