<body>
<div id="box">
{{mytext}}
</div>
<script>
new Vue({
el:"#box",
data:{
mytext:"<b>加粗的</b>"
}
})
</script>
</body>
结果:
在页面上是不能渲染html的,如果想渲染可以加上v-html。
在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 XSS 攻击。只在可信内容上使用
v-html
,永不用在用户提交的内容上。
- 给可信的html代码使用v-html可以渲染:
<body>
<div id="box">
<!-- {{mytext}} -->
<div v-html="mytext"></div>
</div>
<script>
new Vue({
el:"#box",
data:{
mytext:"<b>加粗的</b>"
}
})
</script>
</body>
结果: