Vue指令之v-html

  • Post author:
  • Post category:vue

                           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 

 


版权声明:本文为zjpjay原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。