- 深度探索Vue.js:原理剖析与实战应用
- 张云鹏编著
- 251字
- 2024-12-28 11:11:51
2.4.1 v-html指令介绍
v-html指令为Vue定义的取值指令,可以将data选项中定义的属性输出到指定的标签内部,并且可以解析属性中所写的HTML代码,相当于DOM操作中的插入innerHTML操作。它的作用是弥补{{}}插值表达式无法解析字符串中的HTML标记代码的缺点。在开发过程中需要动态地向HTML文档部分插入一段同属HTML结构的内容时,如果使用{{}}进行操作,则渲染在界面上的将是原始代码。因为{{}}在取值渲染时,插入HTML文档部分的是Text(纯文本)节点,相当于DOM操作中的插入innerText操作。v-html必须在双标签中使用。
接下来通过实际代码案例学习v-html的使用方式,代码如下:
![](https://epubservercos.yuewen.com/EAE1DD/31397881207142106/epubprivate/OEBPS/Images/Figure-P26_1079.jpg?sign=1739098972-nwyR0uROS9B9pwHkj2K19LXYDr9IVsHh-0-30ccfaaaa952a2f86fe36dce34f41f19)
该案例运行的结果如图2-2所示。