一起学vue指令之v-html
一起学vue指令之v-html
指令可看作标签属性
某些情况下,我们点击百度搜索下一页,服务器应该就返回下一页的数据页面,包含其他资源链接等。
返回的数据的本质是一个含HTML代码的字符串。
以百度链接为例,如果是链接,它的形式是 <a href="http://www.baidu.com">百度一下</a>
如果我们直接通过{{}}插值输出,由于没有解析,就直接输出包含HTML的字符串,这肯定不符合需求的
![未使用v-html 未使用v-html](./images/%E6%9C%AA%E4%BD%BF%E7%94%A8v-html.gif)
未使用v-html
我们希望它先按照HTML格式进行解析,然后再显示对应的内容。
在需要输出的标签容器内使用v-html指令即可解析
![使用v-html 使用v-html](./images/%E4%BD%BF%E7%94%A8v-html.gif)
使用v-html
v-html的特点:
1.该指令后面的内容是字符串
2.浏览器引擎会先解析字符串的html代码,然后再显示输出剩余内容