【Vue】输出基础的html元素

微信订阅号：Rabbit_svip

---

本节关键字：v-html

我们知道，可以用v-bind这种方式给元素绑定动态属性。

也可以用 {{ }} 这种双花括号的方式来渲染内容。

但如果需要输出 html 元素，以上这两种方法都不太好使。

---

v-bind

微信订阅号：Rabbit_svip

微信订阅号：Rabbit_svip

上面这样写，链接是有效的。

---

html模板

微信订阅号：Rabbit_svip

微信订阅号：Rabbit_svip

定义了一个 finsishedLink，里面写的是一个a标签。

但如果用html模板的方式输出，会输出字符串，并不是我们理想中的效果。

---

如果需要输出一个 html 元素，可以用** v-html**

微信订阅号：Rabbit_svip

微信订阅号：Rabbit_svip

可以看到，a标签完美输出，而且包裹在div标签里面。

但用 v-html 很容易受到跨站脚本攻击（XSS攻击）。

谨慎使用～～