在Vue中有很多特殊的标签属性,这些属性一般以’v’开头,用于在标签中实现特殊的功能。
例如,当Vue实例的data是一个inner html,我们想在网页上渲染这部分html,如果依然使用之前的{{ variable }}
,则只会将inner html的源码显示出来,无法进行渲染。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><div id="box">{{msg}}<!-- <div v-html="msg"></div> --></div><script>const app = new Vue({el: "#box",data:{msg:`<a href="https://blog.csdn.net/ShadyPi">ShadyPi's blog</a>`}})</script>
</body>
</html>
效果如下:
但是如果把容器中的元素添加一个标签属性v-html
,并将该属性的值赋为msg,即
<div v-html="msg"></div>
则能成功渲染出指向我博客的超链接: